Как передать значение с помощью 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.