Question

当我想在带有secureTextEntry道具的文本输入中使用密码类型时，占位符不支持RTL

<TextInput style={styles.input}
                                   value={this.state.password}
                                   secureTextEntry={true}
                                   placeholder="الزامی"
                                   underlineColorAndroid="transparent"
                                   onChangeText={(text) => this.setState({password: text})}/>

和结果

该问题的解决方案是什么？

Answer 1

您需要将项目配置为支持 rtl 。 here是React Native Blog的官方指南。让我知道它是否对您有用。

Answer 2

请检查此代码段，它适用于RTL和LTR条件。我还附加了代码段snack.expo.io

import { I18nManager,Text,TextInput, View, StyleSheet } from 'react-native';

    <View style={{ borderWidth: 1, marginTop: 20, borderColor: '#000' }}>
          <TextInput
            style={{
              color: '#000',
              borderColor: '#000',
              textAlign: I18nManager.isRTL ? 'right' : 'left',
            }}
            value={this.state.password}
            placeholder="الزامی"
            placeholderTextColor="#303030"
            secureTextEntry={true}
            underlineColorAndroid="transparent"
            onChangeText={text => this.setState({ password: text })}
          />
        </View>

您需要添加 I18nManager 来检查您的用户界面处于RTL模式还是LTR模式

Answer 3

我只是用direction: rtl;编写了一个基本代码段。希望对您有帮助。谢谢

<TextInput style={styles.input} 
           value={this.state.password} 
           secureTextEntry={true} 
           placeholder="الزامی" 
           underlineColorAndroid="transparent" 
           onChangeText={(text) => 
           this.setState({password: text})}
           direction ='rtl'
/>

在React Native中使用密码类型时，文本输入的占位符不支持RTL

3 个答案: