按鈕拒絕在容器中水平居中

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', 
}