React Native：子コンポーネントが "aspectRatio"を指定したときに "justifyContent"プロパティが尊重されない

Question

このネイティブプロジェクトの反応でこのフレックスレイアウトの問題に直面しています。

私はいくつかの円を含む行は、彼らのスタイルは次のように定義されています：

rowStyle:{ 
 
     flex: 1, 
 
     flexDirection: 'row', 
 
     alignItems: 'center', 
 
     justifyContent: 'center', 
 
     borderColor:"red", 
 
     borderWidth:1, 
 
    }, 
 
    
 
circleStyle:{ 
 
     flex:1, 
 
     margin:10, 
 
    },

あなたが見ることができるように、そして、ここでのシナリオでありますサークルの半径は少し大きすぎると、彼らは行を出て行った。 cycleStyleへ： "1アスペクト比" と、このような結果を得る：だから私は追加今

circleStyle:{ 
 
     flex:1, 
 
     aspectRatio:1, 
 
     margin:10, 
 
    },

を、行が少し短すぎます。私は行の幅を制約する必要があります。

または

は "幅：Dimensions.get（ '窓'）幅" rowStyleへ

、彼らの両方が私を与える：私は

" 'ストレッチ' alignSelf" を追加しようとしました

ここで、rowStyleの「justifyContent」プロパティは何とか無視されます。

問題は、行の最大幅を維持したまま、円の内側と中央を維持する方法です。ありがとう。

Answer 1

paddingVerticalにcircleStyleのaspectRatioではなくrowStyleを指定してください。 他の人が正しいアイデアを得るためには、コンポーネントシートとスタイルシートを共有してください。