Question

我目前正在使用React Native的应用程序UI，并且对齐问题使我丧命：我无法使文本框和文本输入的文本水平对齐。

这是一行渲染的摘录：

render() {
    return (
        <View style={styles.container}>
            <View style={styles.line}>
                <Text style={styles.textLabel}>Player name:</Text>
                <TextInput
                    style={styles.textBox}
                    onChangeText={(playerNameState) => this.setState({playerNameState })}
                    value={this.state.playerNameState} />
            </View>
        </View>
    );
}

这是我使用的样式（背景色仅供边框参考：

const styles = StyleSheet.create({
container: {
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
    flex: 1,
    backgroundColor: 'white'
},
line: {
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    margin: 5,
    height: 50
},
textLabel: {
    height: 50,
    fontSize: 18,
    backgroundColor: 'blue',
    alignItems: 'center'
},
textBox: {
    color: 'grey',
    height: 50,
    fontSize: 18,
    backgroundColor: 'red',
    flexGrow: 1,
    alignItems: 'center'
}

我思考我不需要那么多的alaignItems，但我只是想向您展示我尝试了什么。有任何想法吗？

Answer 1

将这些文本（输入）组件包装到视图中，它应该可以工作：

render() {
return (
    <View style={styles.container}>
        <View style={styles.line}>
            <View style={styles.textLabel}>
              <Text>Player name:</Text>
            </View>
            <View style={styles.textBox}>
              <TextInput
                onChangeText={(playerNameState) => this.setState({playerNameState })}
                value={this.state.playerNameState} />
            </View>
        </View>
    </View>
);}

您还可以在styles.textBox和textLabel中添加justifyContent：'center'以使内容垂直对齐。

无法在ReactNative UI中水平对齐文本

1 个答案: