按钮拒绝在容器中水平居中

Question

我正试图了解React Native，但出于某种原因，我无法让按钮在视图容器中水平居中。

export default class LoginScreen extends Component {
  static navigationOptions = {
    header: null,
  }
  render() {
    return (
      <View style={styles.container}>
        <MKTextField
          tintColor={config.colors.accent}
          floatingLabelEnabled={true}
          autoFocus={true}
          textInputStyle={{color: config.colors.primary, height: 32}}
          placeholder="Login"
          style={styles.loginInput}
          onTextChange={(text) => this.setState({text})} />
        <MKButton
          style={styles.button}
          shadowRadius={2}
          shadowOffset={{width:0, height:2}}
          shadowOpacity={.7}
          shadowColor="black"
          onPress={() => {
            console.log('hi, raised button!');
          }}>
          <Text pointerEvents="none"
            style={{color: 'white', fontWeight: 'bold', alignSelf:'center'}}>
            Login
          </Text>
        </MKButton>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  loginInput: {
      width: '100%'
  },
  logo: {
    height: '25%'
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    paddingLeft: 16,
    paddingRight: 16
  },
  button: {
    backgroundColor: config.colors.primary,
    borderWidth: 0,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

这就是它的样子：

真的无法告诉我们这里会发生什么事情！

Answer 1

在您的风格中，您需要将alignItems更改为alignSelf

button: {
    backgroundColor: config.colors.primary,
    borderWidth: 0,
    height: 40,
    justifyContent: 'center',
    alignSelf: 'center',
}