Как передать значение между страницами React Native

Я очень новичок в том, чтобы реагировать на родной язык, и я пытаюсь передать два входа между двумя страницами, нажав кнопку, но я не уверен, где я ошибаюсь. Мое намерение состоит в том, чтобы одна переменная была «название книги», а вторая - «количество страниц». Любая помощь будет очень признательна.

Страница 1

const FirstPage = ({navigation}) => {
  const [userName, setUserName] = useState('');
    return (
        <SafeAreaView style = {{flex: 1}}>
          <View style = {styles.container}>
            <Text style = {styles.heading}>
              React Native Pass Value From One Screen to Another
              Using React Navigation
            </Text>
            <Text style = {styles.textStyle}>
              Please insert your name to pass it to second screen
            </Text>
            {/*Input to get the value from the user*/}
            <TextInput
              value = {String}
              onChangeText = {(bookname) => setUserName(bookname)}
              placeholder = {'Enter Any value'}
              style = {styles.inputStyle}
            />
            
            <TextInput
              value = {String}
              onChangeText = {(pagenum) => setUserName(pagenum)}
              placeholder = {'Enter Any value'}
              style = {styles.inputStyle}
            />
            <Button
              title = "Go Next"
              //Button Title
              onPress = {() =>
                navigation.navigate('SecondPage', {
                  paramKey: pageNum,
                  paramKey: bookName,
                })
              }
            />

Страница 2

const SecondPage = ({route}) => {
  return (
    <SafeAreaView style = {{flex: 1}}>
      <View style = {styles.container}>
        <Text style = {styles.heading}>
          React Native Pass Value From One Screen to Another
          Using React Navigation
        </Text>
        <Text style = {styles.textStyle}>
          Values passed from First page: {route.params.paramKey}
        </Text>
      </View>
    
    </SafeAreaView>
  );
};

Взгляните на документацию: reactnavigation.org/docs/params.

— 26.10.2022 16:53

android reactjs react-native input parameters

26.10.2022 16:34

Коллекции (ArrayList , HashSet , HashMap)

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

    <Button
      title = "Go Next"
      //Button Title
      onPress = {() =>
        navigation.navigate('SecondPage', {
          paramKey: pageNum,
          paramKey: bookName,
        })
      }
    />

Вы можете использовать сокращение:

    <Button
      title = "Go Next"
      //Button Title
      onPress = {() =>
        navigation.navigate('SecondPage', {
          pageNum, // same like pageNum: pageNum
          bookName,//           bookName: bookName
        })
      }
    />

Параметры доступа:

 const SecondPage = ({route}) => {
  return (
    <SafeAreaView style = {{flex: 1}}>
      <View style = {styles.container}>
        <Text style = {styles.heading}>
          React Native Pass Value From One Screen to Another
          Using React Navigation
        </Text>
        <Text style = {styles.textStyle}>
          Values passed from First page: {route.params.pageNum}
        </Text>

        <Text style = {styles.textStyle}>
          Values passed from First page: {route.params.bookName}
        </Text>
      </View>
    
    </SafeAreaView>
  );
};

Я продолжаю получать сообщение об ошибке "Не удается найти переменную: pageNum"

— 26.10.2022 16:48

26.10.2022 16:44

Ответ принят как подходящий

Здесь вы можете найти полный пример

import * as React from 'react';
import { Pressable, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createStackNavigator,
  HeaderBackButton,
} from '@react-navigation/stack';
import { useNavigation, useRoute } from '@react-navigation/native';

function ScreenOne() {
  const navigation = useNavigation();
  const route = useRoute();

  return (
    <View style = {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Screen {route?.params?.passedValue}</Text>
      <Pressable
        onPress = {() => navigation.navigate('Two', { passedValue: 'Two : 2'})}
        style = {{ backgroundColor: 'plum', padding: 10 }}>
        <Text>Navigate an pass</Text>
      </Pressable>
    </View>
  );
}


const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name = "One" component = {ScreenOne} />
        <Stack.Screen name = "Two" component = {ScreenOne} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

28.10.2022 21:08

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

Компонент React не перерисовывается при изменении состояния компонента

VSCODE intellisense не получает код css в файле jsx

Import useDispatch вызывает ошибку «useReduxContext.js: 24 Uncaught Error: не удалось найти значение контекста react-redux;..»

Проблема с использованием оператора if в форме реакции-хука

Компонент React отправляет [object Object] в запросе запроса

Как по-разному стилизовать элемент в плоском списке?

ReactJS извлекает данные из бэкэнда, показывает в форме и отправляет данные обратно

Почему происходит утечка памяти в тестах компонентов (Jest с библиотекой React Testing)?

OnChange не получает отключенное входное значение для состояния

Получить данные из объекта, который иногда имеет значение null

Как передать значение между страницами React Native

Ответы 2

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

Похожие вопросы