为什么输入字段在android中不显示全宽？

Question

我正在使用react-native。我的输入字段没有显示在完整的width 上，为什么？但是当我检查 IOS 时，它可以正常工作，以全宽显示输入字段。 这是我的代码 https://rnplay.org/apps/aHRkHA

import React from 'react';
import {
  registerComponent,
} from 'react-native-playground';
import {
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';

class App extends React.Component {
  render() {
    return (
           <View style={styles.container}>

                <Text style={styles.heading}> Login</Text>
                <TextInput
                    style={styles.loginInput}
                    placeholder="Type here to translate!"
                />
            </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#EF501E',
        flex: 1,
        alignItems: 'center'
    },
    logo: {
        width: 50,
        height: 50
    },
    heading: {
        fontSize: 30,
        marginTop: 20
    },
    loginInput: {
        height: 50,
        borderWidth: 1,
        borderColor: '#33090C',
        flexDirection: 'row',
        justifyContent: 'center',
    }
});

registerComponent(App);

Answer 1

尝试用alignSelf: 'stretch' 覆盖父级的alignItems: 'center' 以获得<TextInput>：

<View style={styles.container}>
  ...

  <View style={{alignSelf: 'stretch'}}>
    <TextInput
      style={styles.loginInput}
      placeholder="Type here to translate!"
    />
  </View>
</View>