react-nativeが同じ行のTouchableOpacityコンポーネントを水平にレンダリングする方法 - 水平方向に

Question

私は製品コンポーネントを持っています - 画像に示すようにTouchableOpacityがあります。製品の数はダイナミックです。それは、各行に2つの製品を掲載したいということです。 しかし、私はできません。私は水平をtrueに設定していますが、垂直にレンダリングします。 どうすれば解決できますか？提案はありますか？

は、ここでコンポーネント

の私のスタイリングであり、それは彼らが反応し、ネイティブでflexDirectionのデフォルト値はcolumnある

Answer 1

にレンダリングされている方法です。 rowに、TouchableOpacityというリストのコンテナのスタイルで設定する必要があります。ここで

は、公式ドキュメントからの例です：https://facebook.github.io/react-native/docs/flexbox.html#flex-direction

あなたが次の行にラップするコンテナのサイズを超えて、あなたの要素を、必要な場合、あなたはflexWrap:"wrap"を設定することができます。 ここに文書があります：https://facebook.github.io/react-native/docs/layout-props.html#flexwrap