ネイティブ、子供の幅にパーセンテージで反応します

Question

ここに私のコードです。私は、製品ビューがその親の90％の幅を占めるようにしたい。ただし、以下の設定は機能していません。

...任意のアイデアはどのような寸法を使用せずに、それを達成するには？

return (
     <LazyloadScrollView 
      style={styles.container} 
      contentContainerStyle={styles.content} 
      name="scrollImage" > 
      {list.map((product, i) => <View key={i} style={styles.product}> 
      <LazyloadImage 
       host="scrollImage" 
       style={styles.image} 
       source={image} 
       animation={false}> 
       <View style={styles.id}> 
       <Text style={styles.idText}>{product.id}</Text> 
       </View> 
      </LazyloadImage> 
      </View>) 
      } 
     </LazyloadScrollView> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#ffffff' 
    }, 
    content: { 
    paddingTop: 20, 
    justifyContent: 'center', 
    alignItems: 'center', 
     backgroundColor: '#eee' 
    }, 
    product: { 
     flex: 0.9, 
     marginTop: 5, 
     flexDirection: 'row', 
     alignItems: 'center', 
     backgroundColor: '#FFFFFF' 
    }, 

Answer 1

Dimensionsを使用しない理由は？それはあなたのアプリが応答するようになります。

あなたは、寸法を使用するコンテナ内のいくつかのスタイルの設定を試してみて、それが子供たちの、例えば、それがために動作するかどうか私にはわからないことパディング

container: { 
    backgroundColor: '#ffffff', 
    alignSelf: 'stretch', 
    padding: 30 
    } 

と幅いっぱいにしない場合それをテストするためにコードの残りの部分をポストする必要がありますが、動作させるまでスタイルとフレックスのプロパティで遊んで続ける必要があります。

ところで、常に良いofficial layout props docs from react native

そしてcss tricks guide to flexbox