react-native - react 原生拉伸(stretch)行项目？

Question

我必须在 View 中彼此相邻的按钮
出于某种原因，即使我将 View 设置为 alignItems: 'stretch' 或设置项目 alignSelf: 'stretch' 他们也不会用完可用空间。我怎么能解决这个问题？

例如:

<View style={{flexDirection: 'row', alignItems: 'stretch'}}>
    <View style={{backgroundColor: 'red', height: 100}}/>
    <View style={{backgroundColor: 'blue', height: 100}}/>
</View>

View 不会拉伸(stretch)，内部元素将保持宽度:0

或与按钮项目相同:

<View style={{flexDirection: 'row', alignItems: 'stretch'}}>
    <Button title='text' style={{backgroundColor: 'red', 
    height: 100}}/>
    <Button title='text' style={{backgroundColor: 'blue', 
    height: 100}}/>
</View>

Answer 1

你需要给宽度 到主视图。所以你可以根据它设置按钮。此外，您需要设置 弹性 每个按钮。

<View style={{flexDirection: 'row', width:'100%', flex:1}}>
    <Button title='text' style={{backgroundColor: 'red', 
    height: 100, flex:1}}/>
    <Button title='text' style={{backgroundColor: 'blue', 
    height: 100, flex:1}}/>
</View>