5

Flexbox (および React Native) でこのレイアウトを作成しようとしていますが、うまくいきません。具体的には、左ボタンと右ボタンは、何をしてもコンテナーの幅の 50% に拡大することを拒否します。それらは常にコンテンツのサイズです。

ネストされたコンテナを使用しています。ボタンは、画像を含む行の Flex コンテナにネストされた列状の Flex コンテナにあります。

ここに画像の説明を入力

これが私のJSXです：

  <View style={{
    display: 'flex',
    flex: 1,
    flexDirection: 'column'}}>
      <Image
        style={{flex: 1, zIndex: 1, width: '100%', height: '100%'}}
        resizeMode='cover'
        resizeMethod='resize'
        source={require('./thumbs/barry.jpg')}
      />
      <View style={{
        display: 'flex',
        flexDirection: 'row',
        flex: 0,
        width: '100%',
        height: 100}} >
          <Button style='flex: 1' title="LEFT"  onPress={() => {}} />
          <Button style='flex: 1' title="RIGHT" onPress={() => {}} />
      </View>
  </View>

すべての返信は大歓迎です...

4

4 に答える 4

1

多分これはあなたを助けるでしょう：

.container{
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

.image{
  height: 500px;
  flex-basis: 100%;
  background-color: green;
}

.button{
  box-sizing: border-box;
  flex-basis: 50%;
  height: 100px;
  background-color: red;
  border: solid 1px black;
}
<div class="container">
  <div class="image"></div>
  <div class="button"></div>
  <div class="button"></div>
</div>

フレックスボックスの使用で問題が発生した場合は、このリソースを使用してください。フレックスボックスの問題を解決するのに非常に役立ちます。うまくいけば、今あなたの問題を解決できます。

于 2018-03-27T20:34:02.657 に答える
0

React Native のコードベースを見ると、Button コンポーネントはスタイルを props として取りません。問題は、ボタンがスタイルを受け入れないことです。だから私はビューでボタンをラップしました。作業コードのサンプルは次のとおりです。

<View style={{
    flex: 1,
  }}>
    <Image
      style={{ flex:1, zIndex: 1, width: '100%', height: '100%'}}
      resizeMode='cover'
      resizeMethod='resize'
      source={require('./thumbs/barry.jpg')}
    />
    <View style={{
      flexDirection: 'row',
      height: 100}} >
      <View style={{flex:1}}>
      <Button title="LEFT"  onPress={() => {}} />
      </View>
      <View style={{flex:1}}>
        <Button title="RIGHT"  onPress={() => {}} />
      </View>
    </View>
  </View>
于 2018-03-28T06:43:44.763 に答える