import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';
これは私のReact Buttonのコードですが、スタイルが動作しません Hare ...
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={{color: 'red', marginTop: 10, padding: 10}}
/>
また、このコードで試してみました。
<Button
containerStyle={{padding:10, height:45, overflow:'hidden',
borderRadius:4, backgroundColor: 'white'}}
style={{fontSize: 20, color: 'green'}}
onPress={this.onPress.bind(this)} title={"Go Back"}
> Press me!
</Button>
また、この方法で試したのですが...
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={styles.buttonStyle}
>ku ka</Button>
const styles = StyleSheet.create({
buttonStyle: {
color: 'red',
marginTop: 20,
padding: 20,
backgroundColor: 'green'
}
});
React Native Button**は、できることが非常に限られているので、Buttonを参照してください。
また、<Button>txt</Button>
のようなウェブ方式でテキストを設定するのではなく、タイトルプロパティである<Button title="txt"/>
を介して設定します。
外観をもっとコントロールしたい場合は、TouchableOpacityのようなTouchableXXXX'コンポーネントの一つを使用するとよいでしょう。 これらのコンポーネントはとても簡単に使用できます :-)
独自のボタンコンポーネントを作りたくない場合は、ボタンをビューで囲むことで、少なくともレイアウトスタイリングを適用することができます。
例えば、これはボタンの列を作ります。
<View style={{flexDirection: 'row'}}>
<View style={{flex:1 , marginRight:10}} >
<Button title="Save" onPress={() => {}}></Button>
</View>
<View style={{flex:1}} >
<Button title="Cancel" onPress={() => {}}></Button>
</View>
</View>
私も勉強中ですが、Viewで囲むことで、ボタンの周りにスタイルを追加することができるかもしれません。
const Stack = StackNavigator({
Home: {
screen: HomeView,
navigationOptions: {
title: 'Home View'
}
},
CoolView: {
screen: CoolView,
navigationOptions: ({navigation}) => ({
title: 'Cool View',
headerRight: (<View style={{marginRight: 16}}><Button
title="Cool"
onPress={() => alert('cool')}
/></View>
)
})
}
})