React Native 拉伸行项目？

Question

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

例如：

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

视图不会拉伸，内部元素将保持宽度：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

您需要为主视图提供宽度。所以你可以根据它来设置按钮。另外，您需要为每个按钮设置Flex。

<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>