Button / TouchableOpacity

Buttonはほとんど何もカスタマイズできない。
スタイルを設定したければTouchableOpacityを使う必要がある。

'react-native'のButtonにはstyleプロパティがないので注意。

React-Native Button style not work

Viewを使ってカスタマイズしているサンプル
How To Customize Button In React Native

import { StyleSheet, View , TouchableOpacity ,Button} from 'react-native';
・・・

  render() {
    return (
      <View style={styles.view}>

        // TouchableOpacity 
        <TouchableOpacity style={styles.button} >
          <Text>TouchableOpacity</Text>
        </TouchableOpacity>
        
        // Button
        <Button Style={styles.button} title="Button"></Button>

      </View>
    );
  }
  
・・・
const styles = StyleSheet.create({
  button: {
    width: 200,
    height: 40,
    margin: 50 ,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
    alignItems: 'center',
  },
}

同じスタイルを適用しても以下の差がでる