在React Native

Question

我需要创建两个或更多按钮，这些按钮的宽度 和水平对齐，根据屏幕宽度按钮的宽度可能会有所不同。

Answer 1

您可以将按钮包装为弯曲视图：

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

Answer 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'
  }
});