堆栈两个相同的在水平UIStackView按钮阵营天然

我有垂直堆叠的两个文本输入的登录表单，并具有两个按钮的容器视图的输入下面：堆栈两个相同的在水平UIStackView按钮阵营天然

我想要的两个按钮伸展以填充按钮容器的宽度（红色），因此每个按钮将占用一半的大小。但是我无法让它工作。我已经尝试过flex*属性的各种组合，但没有运气。

在原生iOS中，我将使用UIStackView来配合orientation = horizontal。 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风格它们变为

我在做什么错？

来源

2017-03-03 iosdude

“Button”组件只是新开发人员的包装组件。如果你想要更多的控制，我建议习惯不同的'Touchable'组件！ :) – stinodes

是的。它是由于反应原生按钮组件。您必须使用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', 
    } 
});

来源

2017-03-03 05:16:42 Saleel

堆栈两个相同的在水平UIStackView按钮阵营天然

回答

相关问题