在 React Native 中，两个等宽的按钮水平填充屏幕

Posted 2023-02-26

【中文标题】在 React Native 中，两个等宽的按钮水平填充屏幕

【英文标题】：Two buttons with equal width horizontally fill the screen in React Native

【发布时间】：2017-03-17 18:32:41

【问题描述】：

我需要创建两个或多个按钮，它们将具有相等的宽度和水平对齐，根据屏幕宽度按钮宽度可能会有所不同。

【问题讨论】：

按钮宽度是多少？

不固定，它取决于它的父视图宽度。

好的，所以我们需要，宽度 = deviceWidth/按钮数。我觉得这很酷

是的，flex 在 View 上工作得很好，但同样不适用于 Button。

【参考方案1】：

您可以将 Button 包装到弹性视图中：

import React,  Component  from 'react';
import  Button, View, StyleSheet  from 'react-native';

export default const FlexedButtons () => (
  <View style=styles.container>
     <View style=styles.buttonContainer>
      <Button title="Button 1"/>
    </View>
    <View style=styles.buttonContainer>
      <Button title="Button 2"/>
    </View>
  </View>
);

const styles = StyleSheet.create(
  container: 
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  ,
  buttonContainer: 
    flex: 1,
  
);

这是 Sketch 上的一个工作示例： https://snack.expo.io/SyMpPSise

【讨论】：

使用 react-native-elements 按钮，我不得不删除容器上的flex:1，它工作得很好，谢谢。

我花了几个小时寻找如何做到这一点！但是，我不必使用 react-native-elements 删除 flex: 1。

使用它“纯”我不得不删除容器上的 flex:1

【参考方案2】：

import React,  Component  from 'react';
import  Button, StyleSheet, View  from 'react-native';

export default class ButtonExample extends Component 
  _onPressButton() 
    alert('You tapped the button!')
  

  render() 
    return (
      <View style=styles.container>
        <View style=styles.buttonContainer>
          <Button
            onPress=this._onPressButton
            title="Press Me"
          />
        </View>
        <View style=styles.buttonContainer>
          <Button
            onPress=this._onPressButton
            title="Press Me"
            color="#841584"
          />
        </View>
        <View style=styles.alternativeLayoutButtonContainer>
          <Button
            onPress=this._onPressButton
            title="This looks great!"
          />
          <Button
            onPress=this._onPressButton
            title="OK!"
            color="#841584"
          />
        </View>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
   flex: 1,
   justifyContent: 'center',
  ,
  buttonContainer: 
    margin: 20
  ,
  alternativeLayoutButtonContainer: 
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  
);

 <View style=styles.menuContainer>

                <TouchableOpacity onPress=() => this.pressLink('Home')>
                 <View style=styles.imageTextContainer>
                      <Image
                       source=require('./on.png') />
                      <Text style=flex:1 ,color: '#fff',fontSize: 20,marginLeft: 20 >Home</Text>
                 </View>
              </TouchableOpacity>

              <TouchableOpacity onPress=() => this.pressLink('About')>

                 <View style=styles.imageTextContainer>
                      <Image
                       source=require('./on.png') />
                      <Text style=flex:1 ,color: '#fff',fontSize: 20,marginLeft: 20 >About</Text>
                 </View>

              </TouchableOpacity>
           </View>


const styles = StyleSheet.create(

  menuContainer: 
    flex: 0.52,
    marginLeft: 5
  ,
  imageTextContainer: 
      marginLeft: 20,
      padding: 10,
      flexDirection: 'row',
      justifyContent: 'space-between'
  
);