猫型iPS細胞研究所

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== Button / TouchableOpacity======

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

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

[[https://stackoverflow.com/questions/43585297/react-native-button-style-not-work|React-Native Button style not work
]]

Viewを使ってカスタマイズしているサンプル
[[https://www.skptricks.com/2018/07/how-customize-button-in-react-native.html|How To Customize Button In React Native]]


<code>
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',
  },
}
</code>

同じスタイルを適用しても以下の差がでる
{{:reactnative:pasted:20190130-010104.png}}

猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール