猫型iPS細胞研究所

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

[[https://facebook.github.io/react-native/docs/flexbox#docsNav|EDIT
Layout with Flexbox]]

[[https://qiita.com/courage-liberty/items/a3999560738e0cd64490|ReactNativeで簡単なfetchからFlatList→onPressまでのサンプルプログラム（CRNA）]]

[[https://qiita.com/shohey1226/items/5185fcba7381bf4da2f2|React Nativeのデザイン - Stylesheet/Flexbox (part1)]]

[[https://qiita.com/shohey1226/items/f413c65b7f110dcb955c|React Nativeのデザイン - Stylesheet/Flexbox (part2)]]

[[https://qiita.com/nitaking/items/52ca6c23ba7c6c171d0e|【React Native】よく使うスタイル実装まとめ【StyleSheet】]]

[[https://casesandberg.github.io/react-color/|React Color]]

====== widthやhight ======
数字でも%でも指定できる。%の場合は''が必要。
<code>
style={{flex:1,width:'100%',maxHeight:200,top:50}}
</code>

===== flex =====
flex:1を親に追加すると、親は全体に広がります
子にもつけると、つけた数字の割合で親の中で広がります

===== flexDirection =====
親に設定し、子の並ぶ方向を決める。
column（デフォルト)：縦並び。
row：横並び。


===== flexWrap =====
親に設定し、子が画面に入りきらなかった場合の回り込みの設定をする。
nowrap(デフォルト)：そのまま画面の外に伸びていく。
wrap：回り込ませる。


===== justifyContent =====
親に設定し、子の配置方法を設定する。flexDirectionに対する位置。
flex-start(デフォルト）：子を先頭から配置。
flex-end：子を後ろから配置。
center：子を真ん中に配置。
space-between：子を先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟む。
space-around：各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置。


===== alignItems =====
親に設定し、子の横の広がり、もしくは位置を設定する。
stretch（デフォルト）：伸ばして配置。
flex-start：子を先頭から配置。
flex-end：子を後ろに配置します。
center：子を真ん中に配置します
alignSelf：親の設定を子側で上書きする。alignItemsと同じ値が設定できる。


===== flexサンプル =====
flex:1を親に追加すると、親は全体に広がります


<code javascript>
        <View style={{flex:1, backgroundColor: 'red'}}> //flex:1
          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-152110.png}}

子にもつけると、つけた数字の割合で親の中で広がります。
<code javascript>
        <View style={{flex:1, backgroundColor: 'red'}}>

          <View style={{flex:1,height: 50, backgroundColor: 'powderblue'}} > //flex:1
            <Text>1.powderblue</Text>
          </View>
          <View style={{flex:2,height: 50, backgroundColor: 'skyblue'}} > //flex:2
            <Text>2.skyblue</Text>
          </View>
          <View style={{flex:3,height: 50, backgroundColor: 'steelblue'}} > //flex:3
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-152214.png}}


===== flexDirectionサンプル =====
親に設定し、子の並ぶ方向を決める。
column（デフォルト)：縦並び。
<code javascript>
        <View style={{flex:1, flexDirection:'column' , backgroundColor: 'red'}}> // flexDirection:'column' 

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-152601.png}}

row：横並び。
<code javascript>
        <View style={{flex:1, flexDirection:'row' , backgroundColor: 'red'}}> // flexDirection:'row'

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-152423.png}}

===== flexWrapサンプル =====
親に設定し、子が画面に入りきらなかった場合の回り込みの設定をする。
nowrap(デフォルト)：そのまま画面の外に伸びていく。
<code javascript>
        <View style={{flex:1, flexDirection:'row' , flexWrap:'nowrap' , backgroundColor: 'red'}}>　// flexWrap:'nowrap'

          <View style={{height: 50, width:180, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, width:180, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, width:180, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-153024.png}}


wrap：回り込ませる。
<code javascript>
        <View style={{flex:1, flexDirection:'row' , flexWrap:'wrap' , backgroundColor: 'red'}}>　// flexWrap:'wrap'

          <View style={{height: 50, width:180, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, width:180, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, width:180, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-153108.png}}


===== justifyContentサンプル =====
親に設定し、子の配置方法を設定する。flexDirectionに対する位置。
flex-start(デフォルト）：子を先頭から配置。
<code javascript>
        <View style={{flex:1, justifyContent:'flex-start', backgroundColor: 'red'}}>　//justifyContent:'flex-start'

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-153229.png}}


flex-end：子を後ろから配置。
<code javascript>
        <View style={{flex:1, justifyContent:'flex-end', backgroundColor: 'red'}}>　//justifyContent:'flex-end'

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-153313.png}}

center：子を真ん中に配置。
<code javascript>
        <View style={{flex:1, justifyContent:'center', backgroundColor: 'red'}}>　//justifyContent:'center'

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-153356.png}}

space-between：子を先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟む。
<code javascript>
        <View style={{flex:1, justifyContent:'space-between', backgroundColor: 'red'}}>　//justifyContent:'space-between'

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-153501.png}}


space-around：各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置。
<code javascript>
        <View style={{flex:1, justifyContent:'space-between：', backgroundColor: 'red'}}>　//justifyContent:'space-around'

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-153525.png}}

===== alignItemsサンプル =====
親に設定し、子の横の広がり、もしくは位置を設定する。

stretch（デフォルト）：伸ばして配置。
<code javascript>
        <View style={{flex:1, alignItems :'stretch', backgroundColor: 'red'}}>　//alignItems :'stretch'

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-153838.png}}



flex-start：子を先頭から配置。
<code javascript>
        <View style={{flex:1, alignItems :'flex-start', backgroundColor: 'red'}}>　//alignItems :'flex-start'

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-153930.png}}

flex-end：子を後ろに配置します。
<code javascript>
        <View style={{flex:1, alignItems :'flex-end', backgroundColor: 'red'}}>　//alignItems :'flex-end'

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>

{{:reactnative:pasted:20190210-154015.png}}

center：子を真ん中に配置します。
<code javascript>
        <View style={{flex:1, alignItems :'center', backgroundColor: 'red'}}>　//alignItems :'center'

          <View style={{height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>
{{:reactnative:pasted:20190210-154129.png}}

alignSelf：親の設定を子側で上書きする。alignItemsと同じ値が設定できる。
<code javascript>
        <View style={{flex:1, alignItems :'center', backgroundColor: 'red'}}>　//alignItems :'center'

          <View style={{alignSelf:'flex-start',height: 50, backgroundColor: 'powderblue'}} >
            <Text>1.powderblue</Text>
          </View>
          <View style={{alignSelf:'center',height: 50, backgroundColor: 'skyblue'}} >
            <Text>2.skyblue</Text>
          </View>
          <View style={{alignSelf:'flex-end',height: 50, backgroundColor: 'steelblue'}} >
            <Text>3.steelblue</Text>
          </View>
        </View>
</code>

{{:reactnative:pasted:20190210-154341.png}}


===== そのたサンプル =====


<code>

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

  render() {
    return (
      <View style={styles.view}>
        <Text>Redux Sample</Text>

        <TouchableOpacity style={styles.button} onPress={(e)=>this.pressPlus(e)} >
          <Text>count plus</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button} onPress={(e)=>this.pressMinuss(e)} >
          <Text>count minus</Text>
        </TouchableOpacity>

          <TextInput          
            style={styles.input} 
            onChangeText={(e)=>this.changeName(e)}>
          {this.state.name}
          </TextInput>

        <Text>count:{this.state.count}</Text>
        <Text>name:{this.state.name}</Text>
      </View>
    );
  }

const styles = StyleSheet.create({
  view:{
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center',
    margin:10,
  },
  button: {
    width: 200,
    height: 40,
    margin: 5 ,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    width: 200,
    height: 40,
    margin: 5 ,
    backgroundColor: '#f5f5f5',
    borderColor : 'black',
    justifyContent: 'center',
    alignItems: 'center',
  },
}
</code>
{{:reactnative:pasted:20190130-071510.png}}
猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール
