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

Question

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

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

和结果



这个问题的解决方案是什么？

Answer 1

请检查此代码片段，它适用于 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 检查您的 UI 处于 RTL 模式还是 LTR 模式