像 React Native 中的水平 UIStackView 一样堆叠两个按钮答案

【问题标题】：Stack two buttons like in a horizontal UIStackView in React Native像 React Native 中的水平 UIStackView 一样堆叠两个按钮
【发布时间】：2017-07-23 01:48:13
【问题描述】：

我有一个登录表单，其中有两个垂直堆叠的文本输入和一个容器视图，输入下方有两个按钮：

我希望这两个按钮可以拉伸以填充按钮容器的宽度（红色），因此每个按钮将占据其大小的一半。但是我无法让它工作。我尝试了flex* 属性的各种组合，但没有成功。

在本机 iOS 中，我会为此使用 UIStackView，方向 = 水平。 React Native 文档说几乎任何布局都可以使用 flexbox 实现。

这是我的组件现在的样子：

import React, {Component} from 'react';
import {KeyboardAvoidingView, TextInput, View, StyleSheet} from 'react-native';
import Button from 'react-native-button';

export default class Login extends Component {
  render() {
    return (
      <KeyboardAvoidingView style={styles.container}>
        <TextInput
          placeholder="LOGIN"
          placeholderTextColor="#505050"
          style={styles.input}/>
        <TextInput
          placeholder="PASSWORD"
          placeholderTextColor="#505050"
          style={styles.input}/>
        <View style={styles.buttonContainer}>
          <Button 
            onPress={() => this.logIn()}
            style={[styles.button, styles.loginButton]}>
            Log in
          </Button>
          <Button
            onPress={() => this.register()}
            style={[styles.button, styles.registerButton]}>
            Register
          </Button>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
    backgroundColor: 'lightgray'
  },
  input: {
    height: 40,
    marginBottom: 12,
    paddingHorizontal: 8,
    backgroundColor: 'white'
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  },
  button: {
    padding: 8,
    color: 'white',
    backgroundColor: 'steelblue'
  },
  loginButton: {
    marginRight: 8
  }
});

如果我将flex: 1 添加到button 样式中，它们将变为：

我做错了什么？

【问题讨论】：

Button 组件只是新开发人员的包装组件。如果您想要更多控制，我建议您习惯不同的Touchable-components！ :)

标签： ios react-native flexbox

【解决方案1】：

是的。这是因为 react-native-button 组件。您必须使用 Button 组件的 containerStyle 属性来设置容器的样式。

import React, {Component} from 'react';
import {KeyboardAvoidingView, TextInput, View, StyleSheet} from 'react-native';
import Button from 'react-native-button';

export default class Login extends Component {
  render() {
    return (
      <KeyboardAvoidingView style={styles.container}>
        <TextInput
          placeholder="LOGIN"
          placeholderTextColor="#505050"
          style={styles.input}/>
        <TextInput
          placeholder="PASSWORD"
          placeholderTextColor="#505050"
          style={styles.input}/>
        <View style={styles.buttonContainer}>
          <Button
            onPress={() => this.logIn()}
            style={styles.buttonText}
            containerStyle={styles.button}
            >
            Log in
          </Button>
          <Button
            onPress={() => this.register()}
            style={styles.buttonText}
            containerStyle={styles.button}
            >
            Register
          </Button>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
    backgroundColor: 'lightgray'
  },
  input: {
    height: 40,
    marginBottom: 12,
    paddingHorizontal: 8,
    backgroundColor: 'white'
  },
  buttonContainer: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  },
  button: {
    flex: 2,
    padding: 8,
    backgroundColor: 'steelblue',
    alignSelf: 'stretch',
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
  }
});

【讨论】：