web-dev-qa-db-ja.com

React Native Flexboxの100％幅

私はすでにいくつかのflexboxのチュートリアルを読んだことがありますが、それでもこの単純なタスクを機能させることはできません。

赤いボックスを100％幅にするにはどうすればよいですか。

enter image description here

コード：

  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    <Text style={styles.line1}>
      line1
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>

スタイル：

container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
  flexDirection: 'column',
},
welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
  borderWidth: 1,
},
line1: {
    backgroundColor: '#FDD7E4',
},
instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
  borderWidth: 1,
},

ありがとうございました！

更新1： Nishanth Shankarによる提案、ラッパーにflex：1を追加、flexDirection： 'row'

出力：

enter image description here

コード：

  <View style={styles.container}>
    <View style={{flex:1}}>
      <Text style={styles.welcome}>
        Welcome to React Natives
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.line1}>
        line1
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.instructions}>
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      </Text>
    </View>
  </View>

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    borderWidth: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    borderWidth: 1,
  },
  line1: {
      backgroundColor: '#FDD7E4',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    borderWidth: 1,
  },
flexboxreact-native
163
franfran

アイテムのスタイルシートにalignSelf: "stretch"を追加するだけです。

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},
340
Corentin S.

あなたは 寸法 を使うべきです

まず、寸法を定義します。

import { Dimensions } from "react-native";

var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height

それから、以下のようにline1スタイルを変更します。

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},
96
Melih Mucuk

編集済み：

中央のテキストだけを曲げるためには、別のアプローチをとることができます - 他のビューをアンフレックスする

  • FlexDirectionを 'column'のままにします
  • コンテナからalignItems : 'center'を削除します
  • あなたがフレックスしたくないテキストビューにalignSelf:'center'を追加する

TextコンポーネントをViewコンポーネントにラップし、Viewに1のフレックスを与えることができます。

フレックスは与えるでしょう：

styles.containerのflexDirection:'row'の場合は100％の幅

styles.containerのflexDirection:'column'の場合は100％の高さ

22
Nishanth Shankar

どうぞ：

以下のようにline1スタイルを変更してください。

line1: {
         backgroundColor: '#FDD7E4',
         width:'100%',
         alignSelf:'center'
       }
5
iDevAmit

幅と高さを取得してViewのスタイルで追加するには、JavaScriptを使用します。全幅と高さを取得するには、Dimensions.get('window').widthhttps://facebook.github.io/react-native/docs/dimensions.html を使用します。

getSize() {
    return {
        width: Dimensions.get('window').width, 
        height: Dimensions.get('window').height
    }
}

その後、

<View style={[styles.overlay, this.getSize()]}>
5
Sean Chen

最初にDimensionコンポーネントを追加します。

import { AppRegistry, Text, View,Dimensions } from 'react-native';

次に、変数を定義します。

var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;

3番目にそれをあなたのスタイルシートに入れます。

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height*0.25,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}

この例では、実際にレスポンシブビューを作成し、スクリーンビューの0.25だけを表示したかったので、スクリーンの100％にこれを乗算しない場合は、0.25で乗算しました。

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}
3
Aboalela Mohammed

注目に値する：フレックスコンセプトについて十分に理解するようにしてください。

       <View style={{
          flex: 2,
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <View style ={{
              flex: 1,
              alignItems: 'center, 
              height: 50, 
              borderWidth: 1, 
              borderColor: '#000' 
          }}>
               <Text>Welcome to React Nativ</Text>
           </View>
           <View style={{
              flex: 1,
              alignItems: 'center,
              borderWidth: 1, 
              borderColor: 'red ', 
              height: 50
            }}
            >
              <Text> line 1 </Text>
            </View>
          <View style={{
            flex: 1,
            alignItems: 'center, 
            height: 50, 
            borderWidth: 1,                     
            borderColor: '#000'
          }}>
             <Text>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
             </Text>
           </View>
       </View>
1
Daniel Agus Sidabutar

以下のように、コンテナスタイルのalignItems: 'center'を削除し、textAlign: "center"スタイルにline1を追加するだけです。

それはうまくいくでしょう

container: {
  flex: 1,
  justifyContent: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
}

line1: {
    backgroundColor: '#FDD7E4',
    textAlign:'center'
},
0
ravi

スタイル= {{width： "100％"}}この構文を試してください。 リンクの説明をここに入力

0
Chaurasia