web-dev-qa-db-ja.com

フレックスボックスとネイティブに反応して円の形を作成する方法

これは私のコンポーネントです：

const styles = {
 menuContainer: {
  flex: 1,
  flexDirection: 'column'  
 },
 menuItem: {
  flex: 1,
  borderRadius: ??
 }
}
        <View style={styles.menuContainer}>
            <TouchableOpacity {styles.menuItem}/>                    
            <TouchableOpacity {styles.menuItem}/> 
        </View>

反応ネイティブのbordeRadiusは、50％のようなパーセンテージでは機能せず、フレックスボックスでは各flexItemの幅がわかりません。各flexItemの幅を計算せずに何か考えがありますか？

react-nativeflexboxreact-native-flexbox
7
hossein derakhshan

悪いニュースです。コンテナの寸法が事前にわからない場合は、 onLayout を使用して各フレックスコンテナの寸法を計算するしかありません。

{nativeEvent: { layout: {x, y, width, height}}}

固定の幅と高さを宣言できれば簡単ですが、これはニュースにはならないようです。

circle: {
    width: 100,
    height: 100,
    borderRadius: 100/2
}

機能リクエスト この機能についてはすでに送信されています。ここで賛成票を投じて支持を示してください...

https://react-native.canny.io/feature-requests/p/borderradius-percentages

ごめんなさい！

8
Chris Geirman

flexにborder-radiusを与えることはできないと思うので、デバイスのディメンションを取得してwidthとheightを使用し、ビューにborder-radiusを与えることができます。

0
ravi