css - react native : How do I move the text "hello" to the right side of my app instead of in the middle?

Question

我想使用 CSS 将文本 Hello 移到右侧，但我做不到。

之前还好。但是当我添加一个名为 react-native-popup-menu 的库时，它正在导入菜单， 菜单选项， 菜单选项， 菜单触发器， 菜单提供者。当我输入文本“你好”时，文本将位于中间

export default class Cluster1 extends Component {
constructor(props) {
    super(props)
    this.state = {
        search: false,
        dataToShow: []
    }
}
componentWillMount() {
    this.setState({ dataToShow: ClusterData })
}
searchUpdated = (term) => {
    let matchedItemsArray = []
    if (term === '') {
        this.setState({ search: false, dataToShow: ClusterData })
    } else {
        this.setState({ search: true, dataToShow: ClusterData }, function () {
            ClusterData.map((item) => {
                item.data.map(item1 => {
                    if (item1.name == term) {
                        matchedItemsArray.push(item)
                    }
                })
            })
            this.setState({ dataToShow: matchedItemsArray })
        })
    }
}
render() {
    return (
        <View>
            <View style={styles.top}>
                <TextInput style={styles.search}
                    onChangeText={(term) => { this.searchUpdated(term) }}
                    style={styles.searchInput}
                    placeholder="Type a mood to search" />
                <MenuProvider >
                    <Menu onBackdropPress={() => this.onBackdropPress()}
                    >
                        <MenuTrigger >
                            <Text style={styles.user}>
                                hello
                            </Text>
                        </MenuTrigger>

                        <MenuOptions style={styles.top}>
                            <MenuOption style={styles.top}>
                                <TouchableOpacity onPress={() => this.signOut()}>
                                <Text>SignOut</Text>
                                </TouchableOpacity>
                            </MenuOption>
                        </MenuOptions>
                    </Menu>
                </MenuProvider>
            </View>
        </View>
    );
}}
const styles = StyleSheet.create({
user: {
    paddingRight: 5,
    color: "#841584",

},
top: {
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    borderBottomWidth: 4,
    borderBottomColor: '#ccc',
    textAlign: 'center',
},});

文本“你好”应该在右侧而不是在屏幕中间

Answer 1

给

textAlign : 'right'

根据用户风格。

user: {
    paddingRight: 5,
    color: "#841584",
    textAlign:'right'
}