Блог

Главная - Вопросы по программированию - React Native: как отправить значение TextInput в React Native?

React Native: как отправить значение TextInput в React Native?

#javascript #reactjs #react-native

#javascript #reactjs #react-native

Вопрос:

Я пытаюсь отправить значение TextInput на другой экран, может кто-нибудь мне помочь, пожалуйста.. Вот мой код:

   const [text, setText] = useState ( ' ');
  return (
<>
        <TextInput style={styles.input}
          underlineColorAndroid="transparent"
          placeholder="   Type "
          placeholderTextColor="#9a73ef"
          autoCapitalize="none"
          onChangeText={text => setText(text)}
          //defaultValue={text}
        />
 <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
-----

это мой детальный экран:

 function DetailsScreen(  {text}) {
  return (

<View>


  <Text> Hello this is Details  Screen   { text }</Text>
</View>
   
  );
}

не могу принять никакого значения, даже сделал prop

Комментарии:

1. Где происходит DetailsScreen рендеринг? Передается ли текст?

Ответ №1:

Вы должны передать параметр, как показано ниже

  <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details',{text:text})}
      />

И на экране сведений вы должны получить его, как показано ниже

 function DetailsScreen(  {route}) {
  return (
<View>
  <Text> Hello this is Details  Screen   { route.params.text }</Text>
</View>
  );
}

Обратитесь к официальным документам

Комментарии:

1. о, большое вам спасибо, это сработало ? но могу я задать вам вопрос? как работает маршрут? это как реквизит?

2. Это не похоже на prop, в основном объект, который вы передаете в качестве второго параметра, будет находиться в route.params , рендеринг вашего компонента обрабатывается библиотекой навигации, поэтому у вас нет контроля над реквизитами этого компонента, единственный способ — передать параметры, как указано выше.

3. о, хорошо. я попробовал эту технику со своим вторым текстовым вводом, который является числовым: onChangeText={num => setNum(num)} , и на экране сведений выглядит так: <Текст> Привет, это экран сведений {route.params.num}</Text> но никакой работы .. (

4. вы передали как navigation.navigate(‘Details’,{text:text,num:num})} ?