Как передать значение с помощью React Navigation в приложениях React Native Expo

Здравствуйте, нативные разработчики!

Меня зовут Рохит Кумар Тхакур. Обычно я пишу о React Native, Django, науке о данных, машинном обучении и Python.

Предположим, у вас есть два экрана: Экран А и Экран Б. В этой статье я собираюсь показать вам, как передать информацию о значении от одного компонента экрана к другому, используя реагирующую навигацию. Здесь мы собираемся использовать навигацию по стеку, чтобы выполнить нашу работу. Итак, не теряя времени, давайте начнем этот проект.

Вот пошаговый видеоурок из этой статьи:

Настройка проекта

Внимание всем разработчикам, стремящимся установить социальные связи и зарекомендовать себя, получая при этом пассивный доход — не ищите дальше! Я настоятельно рекомендую книгу From Code to Connections, которая поможет вам в этом процессе. Не упустите возможность получить свою копию прямо сейчас на Amazon по всему миру или Amazon India! Вы также можете выбрать Gumroad.

  • Выберите каталог по вашему выбору
  • В том же каталоге откройте командную строку или терминал.
  • Инициализируйте и выставьте приложение с помощью команды: expo init Info
  • Выберите пустой шаблон и продолжите загрузку зависимостей
  • Перейдите во вновь созданный каталог с помощью команды: cd Info
  • Установите следующую библиотеку JavaScript:
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/stack
expo install react-native-gesture-handler

Теперь откройте этот проект в вашем любимом редакторе кода. Ой! Код ВС? Хороший.

Код

Создайте папку внутри папки проекта и назовите эту папку «Экраны».

В папке Screens создайте два файла JavaScript: Home.js и Detail.js.

App.js

import  { createStackNavigator } from '@react-navigation/stack';
import  { NavigationContainer } from '@react-navigation/native';
import Home from './Screens/Home';
import Detail from './Screens/Detail';
const Stack =  createStackNavigator();
function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name='Detail' component={Detail} />
    </Stack.Navigator>
  )
}
export  default () => {
  return(
    <NavigationContainer>
      <App/>
    </NavigationContainer>
  )
}

В App.js мы просто добавляем навигацию по стеку для обоих компонентов экрана.

Home.js

import { View, Text, TextInput, Button, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import { useNavigation } from '@react-navigation/native'
const Home = () => {
    const navigation = useNavigation();
    const [name, setName] = useState('');
  return (
    <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
      <Text>Please Enter Your Name to Pass it to second screen</Text>
      <TextInput 
        value={name}
        onChangeText={(username) => setName(username)}
        placeholder={'Enter Your Name'}
        style={styles.inputStyle} 
      />
      <Button 
        title='Go Next'
        mode='contained'
        onPress={() => navigation.navigate('Detail', {
            paramKey: name
        })}
      />
    </View>
  )
}
export default Home
const styles = StyleSheet.create({
    inputStyle: {
        width:'80%',
        height:44,
        padding:10,
        marginVertical:10,
        backgroundColor:'#DBDBD6',
    }
})

В Home.js мы используем React Navigation для передачи значения. При нажатии кнопки мы переходим к экрану сведений и передаем «имя» в качестве paramKey.

Detail.js

import { View, Text } from 'react-native'
import React from 'react'
const Detail = ({route}) => {
  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text style={{fontSize:40}}>{route.params.paramKey}</Text>
    </View>
  )
}
export default Detail

Теперь просто отобразите имя на экране сведений, используя приведенный выше код.

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

А теперь хлопайте, хлопайте и хлопайте! И следите за другими статьями о проектах на выставке React Native.

Спасибо за прочтение.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.