ネイティブでは子要素に100％の幅を設定できません

Question

各項目を100％幅にします。スタイルブロックにalignSelf: 'stretch',を追加すると機能しません。

下記の画像をチェックしてください！

How it looks

How it should look

マイコード：

<View> 
    <ButtonNav style={ 
        this.state.currentTab == 'order' 
        ? styles.currentTab 
        : styles.tabItem 
       } 
       onPress={this.order} 
       tagline="BESTÄLLNING" /> 

</View> 

const styles = StyleSheet.create({ 
    navWrapper: { 
     flexDirection: 'row', 
     height: 75, 
     alignItems: 'center', 
     backgroundColor: '#949494', 
     flex: 1 
    }, 
    tabItem: { 
     justifyContent: 'center', 
     borderWidth: 2, 
     borderColor: '#333333', 
     flexGrow: 1, 
     flex: 1 
    }, 
    currentTab: { 
     backgroundColor: '#EEEEEE', 
     justifyContent: 'center', 
     flexGrow: 1, 
     borderTopWidth: 2, 
     borderTopColor: '#333333', 
     flex: 1 
    } 
}); 

Answer 1

問題は、あなたがflexxed ButtonNavにフレックスすることなく、ビューの親を抱えているということですので、あなたのflexsが無視されている、あなた<View>タグを削除して修正することができます。何らかの理由でそれらが必要な場合は、フレックススタイル属性を追加するだけです。これはうまくいくと思います。

<View style={{flex:1}}> 
    <ButtonNav 
     style={ 
      this.state.currentTab == 'order' 
      ? styles.currentTab 
      : styles.tabItem 
     } 
     onPress={this.order} 
     tagline="BESTÄLLNING" /> 

</View> 

Answer 2

const styles = StyleSheet.create({ 
navWrapper: { 
    flexDirection: 'row', 
    height: 75, 
    alignItems: 'center', 
    backgroundColor: '#949494', 
    justifyContent: 'center' 
}, 
tabItem: { 
    borderWidth: 2, 
    borderColor: '#333333', 
    flexGrow: 1, 
    flex: 1, 
}, 
currentTab: { 
    backgroundColor: '#EEEEEE', 
    flexGrow: 1, 
    borderTopWidth: 2, 
    borderTopColor: '#333333', 
    flex: 1 

}} ）

それは