Question

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

例如：

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

视图不会拉伸，内部元素将保持宽度：0

或与Button项目相同：

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

Answer 2

我只是意识到你正在使用alignItems，而你应该使用justifyContent在主轴上展开你的项目（在你的情况下是水平的）。 Stretch不是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>

或者将 Text 组件与 TouchableOpacity 一起使用：

<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

justifyContent: 'space-between' 不会为按钮使用所有可用空间
button {alignSelf: 'stretch'} 不适用于 Button 组件

Answer 4

简单地使用这种样式！

<块引用>

style={{flexDirection: 'row',alignSelf: 'stretch',}}

React Native弹力行项目？

4 个答案: