React Native - обработка <Text /> для использования SecureTextEntry, например <TextInput />

Я пытаюсь найти какие-либо реквизиты в ответных нативных документах, как использовать <Text/>, чтобы скрыть текст Password,

У меня есть динамический объект JS для отображения и использование map для обработки:

renderProfile(){
  var tampil = this.state.data[0].detail.map((item, index)=>{
    return(
      <View key = {index}>
        <Text>{item.Header} :</Text>
        {
          this.state.editProfile ?
          item.Header == 'Password' || item.Header == 'Username' || item.Header == 'Telepon' ?
          <View>
          <TextInput
            //MyProps
          />
          {item.Header=='Password' && this.state.editProfile ? <FontAwesome onPress = {()=>{this.setState({hidePassword: !this.state.hidePassword})}} name = "eye" size = {20} color = "#000"/> : null}
          </View>
          : <Text>{item.Value}</Text>
          : <Text>{item.Value}</Text>
        }
      </View>
    )
  })
  return tampil
}

Я могу работать с <TextInput/> с SecureTextEntry, но на <Text/> я не вижу SecureTextEntry props

Есть ли способ скрыть пароль в компоненте <Text/>?

Почему бы вам просто не использовать <TextInput /> и не установить editable = {false}?

Tim 14.08.2018 08:43

Я пробовал, но когда мы с editable=true редактировали текст, у меня возникала ошибка,

flix 14.08.2018 08:45

с какой ошибкой вы столкнулись?

Tim 14.08.2018 08:49
я получил это
flix 14.08.2018 08:51
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
4
785
2

Ответы 2

Вы должны использовать TextInput для полей пароля.

<View>
    <TextInput secureTextEntry = {true}>
    </TextInput>
</View>

Я уже знаю, есть ли у <TextInput/>secureTextEntry, хочу реализовать на <Text/>

flix 14.08.2018 08:57

Если вы хотите использовать его с <Текст>, вы должны использовать свойство onChangeText, а затем заменить passwordText точкой, например passwordText.replace (". *", ".")

Gaurav 14.08.2018 09:46

Поскольку нет возможности скрыть пароль в Text, и вы хотите использовать узел Text, вы можете создать свой собственный текстовая маска.

securePasswordEntry (value) { 
  return value && value.replace(/./g, '*')
}

<Text>{securePasswordEntry(/*Text you want to secure*/)}<Text>

Другие вопросы по теме