Question

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

以前很好。但是，当我添加了一个名为react-native-popup-menu的库（正在导入Menu）时，菜单选项 MenuOption，菜单触发 MenuProvider。当我将文字设为“ Hello”时，文字将显示在中间

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

文字“ Hello”应该在屏幕右侧，而不是在屏幕中间

Answer 1

放弃

textAlign：'正确'

根据用户风格。

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

React Native：如何将文本“ hello”移动到应用程序的右侧而不是中间？

1 个答案: