在React Native

Question

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

我希望拉伸两个按钮以填充按钮容器的宽度（红色），因此每个按钮的大小只有一半。但是，我无法让它发挥作用。我尝试了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',
  }
});