React Native stretch行项目？

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

您需要为主视图提供width。所以你可以根据它来设置按钮。此外，您还需要为每个按钮设置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>

Answer 2

我只是意识到你在使用alignItems，而你应该使用justifyContent在主轴上展开你的项目(在你的例子中是水平的)。拉伸不适用于justifyContent，因此您可以选择间隔或均匀间隔，例如：

<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
    <View style={{backgroundColor: 'red', height: 100}}/>
    <View style={{backgroundColor: 'blue', height: 100}}/>
</View>

Answer 3

您必须将按钮包装在另一个View组件中：

<View style={{flexDirection: "row"}}>
    <View style = {{flex: 1}}>
        <Button title="Button 1" />
    </View>
    <View style = {{flex: 1}}>
       <Button title="Button 2" />
    </View>
</View>

或者与TouchableOpacity一起使用Text组件

<View style={{ flexDirection: "row"}}>
    <TouchableOpacity style = {{width: "50%"}}>
        <Text style={{textAlign:"center"}} > Button 1 </Text>
    </TouchableOpacity>
    <TouchableOpacity style = {{width: "50%"}}>
        <Text style={{textAlign:"center"}} > Button 1 </Text>
    </TouchableOpacity>
</View>

在这里尝试这两种解决方案：https://snack.expo.io/wAENhUQrp

按钮不会占用所有可用空间buttons

• button {alignSelf: 'stretch'}在按钮组件

上不起作用