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

Question

我有一个登录表单，其中两个文本输入垂直堆叠，一个容器 View 在输入下方有两个按钮:



我希望这两个按钮拉伸(stretch)以填充按钮容器(红色)的宽度，因此每个按钮将占据其大小的一半。但是我无法让它工作。我尝试了 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他们变成的风格:



我究竟做错了什么？

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