Начало работы с библиотекой React Native Navigation

Экран входа в систему является экраном по умолчанию, который пользователь увидит, если он не вошел в систему. Отсюда они могут войти в систему, введя свое имя пользователя или щелкнув забытый пароль, чтобы просмотреть экран для сброса пароля. Как упомянуто ранее, все это просто подделано, и никакой подлинный код аутентификации не используется:

 // src/screens/Login.js import React, { Component } from "react"; import { Navigation } from "react-native-navigation"; import { View, Text, TextInput, Button, TouchableOpacity, StyleSheet } from "react-native"; import AsyncStorage from "@react-native-community/async-storage"; import { goToTabs } from "../../navigation"; export default class Login extends Component { static get options() { return { topBar: { visible: false // need to set this because screens in a stack navigation have a header by default } }; } state = { username: "" }; render() { return ( <View style={styles.wrapper}> <View style={styles.container}> <View style={styles.main}> <View style={styles.fieldContainer}> <Text style={styles.label}>Enter your username</Text> <TextInput onChangeText={username => this.setState({ username })} style={styles.textInput} /> </View> <Button title="Login" color="#0064e1" onPress={this.login} /> <TouchableOpacity onPress={this.goToForgotPassword}> <View style={styles.center}> <Text style={styles.link_text}>Forgot Password</Text> </View> </TouchableOpacity> </View> </View> </View> ); } // next: add login code } // const styles = StyleSheet.create({ wrapper: { flex: 1 }, container: { flex: 1, alignItems: "center", justifyContent: "center", padding: 20 }, fieldContainer: { marginTop: 20 }, label: { fontSize: 16 }, textInput: { height: 40, marginTop: 5, marginBottom: 10, borderColor: "#ccc", borderWidth: 1, backgroundColor: "#eaeaea", padding: 5 } }); 

Вот код для входа. Это просто сохраняет username в локальном хранилище и перемещает пользователя на экраны с вкладками:

 login = async () => { const { username } = this.state; if (username) { await AsyncStorage.setItem("username", username); goToTabs(global.icons, username); } }; 

Наконец, вот код для перехода на другой экран с помощью стековой навигации. Просто вызовите метод Navigation.push() и передайте идентификатор текущего экрана в качестве первого аргумента, а экран, к которому вы хотите перейти, — как второй. name должно быть тем же, которое вы использовали, когда вызывали Navigation.registerComponent() в файле navigation.js ранее:

 goToForgotPassword = () => { Navigation.push(this.props.componentId, { component: { name: "ForgotPasswordScreen" } }); }; 

Экран забытого пароля

Как упоминалось ранее, этот экран просто используется как заполнитель для демонстрации стековой навигации. Убедитесь, что topBar установлен в visible , потому что именно там находится кнопка «Назад» для возврата на экран входа в систему:

 // src/screens/ForgotPassword.js import React, { Component } from "react"; import { View, Text, TextInput, Button, StyleSheet } from "react-native"; export default class ForgotPassword extends Component { static get options() { return { topBar: { visible: true, // visible title: { text: "Forgot Password" } } }; } state = { email: "" }; render() { return ( <View style={styles.wrapper}> <View style={styles.container}> <View style={styles.main}> <View style={styles.fieldContainer}> <Text style={styles.label}>Enter your email</Text> <TextInput onChangeText={email => this.setState({ email })} style={styles.textInput} /> </View> <Button title="Send Email" color="#0064e1" onPress={this.sendEmail} /> </View> </View> </View> ); } // sendEmail = async () => {}; } // const styles = StyleSheet.create({ wrapper: { flex: 1 }, container: { flex: 1, alignItems: "center", justifyContent: "center", padding: 20 }, fieldContainer: { marginTop: 20 }, label: { fontSize: 16 }, textInput: { height: 40, marginTop: 5, marginBottom: 10, borderColor: "#ccc", borderWidth: 1, backgroundColor: "#eaeaea", padding: 5 } }); 

Вы также можете иметь отдельную кнопку для возврата к предыдущему экрану. Все, что вам нужно сделать, это вызвать метод Navigation.pop() :

 Navigation.pop(this.props.componentId); 

Домашний экран

Главный экран — это экран по умолчанию для навигации с вкладками, поэтому пользователь увидит его по умолчанию при входе в систему. На этом экране отображается имя пользователя, которое было передано в качестве реквизита навигации, а также кнопка выхода из системы. Нажав кнопку выхода, вы просто удалите username из локального хранилища и вернетесь обратно к экрану входа в систему:

 // src/screens/Home.js import React, { Component } from "react"; import { View, Text, Button, StyleSheet } from "react-native"; import Icon from "react-native-vector-icons/FontAwesome"; import AsyncStorage from "@react-native-community/async-storage"; import { goToLogin } from "../../navigation"; export default class Home extends Component { render() { const { username } = this.props; return ( <View style={styles.container}> <Text style={styles.text}>Hi {username}!</Text> <Button onPress={this.logout} title="Logout" color="#841584" /> </View> ); } // logout = async () => { await AsyncStorage.removeItem("username"); goToLogin(); }; } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center" }, text: { fontSize: 18, fontWeight: "bold" } }); 

Если вам интересно, как мы получили доступ к имени username , мы передали его как навигационную опору из файла навигации ранее:

 // navigation.js { component: { name: "HomeScreen", options: { ... }, // here: passProps: { username }, } }, 

Экран галереи

Экран галереи — просто экран наполнителя, поэтому мы не будем слишком углубляться в него. В основном, это просто показывает интерфейс фотогалереи:

 // src/screens/Gallery.js import React, { Component } from "react"; import { View, Text, FlatList, Image, Dimensions, StyleSheet } from "react-native"; const { width } = Dimensions.get("window"); const base_width = width / 2; const images = [ { id: 1, src: require("../images/blake-richard-verdoorn-20063-unsplash.jpg") }, { id: 2, src: require("../images/casey-horner-487085-unsplash.jpg") }, { id: 3, src: require("../images/sacha-styles-XK7thML3zEQ-unsplash.jpg") }, { id: 4, src: require("../images/eberhard-grossgasteiger-1036384-unsplash.jpg") }, { id: 5, src: require("../images/justin-kauffman-449060-unsplash.jpg") }, { id: 6, src: require("../images/vincent-guth-182001-unsplash.jpg") } ]; export default class Gallery extends Component { render() { return ( <View style={styles.container}> <FlatList data={images} keyExtractor={(item, index) => item.id.toString()} numColumns={2} renderItem={this.renderImage} /> </View> ); } // renderImage = ({ item }) => { return ( <Image source={item.src} style={{ width: base_width, height: 250 }} /> ); }; } const styles = StyleSheet.create({ container: { flex: 1 } }); 

Экран подачи

Как и экран «Галерея», экран «Лента» также является наполнителем. Он просто показывает интерфейс новостной ленты:

 // src/screens/Feed.js import React, { Component } from "react"; import { View, Text, FlatList, Image, TouchableOpacity, StyleSheet } from "react-native"; const news_items = [ { id: 1, title: "The HTML Handbook", summary: "HTML is the foundation of the marvel called the Web. Discover all you need to know about it in this handy handbook!", image: require("../images/amanda-phung-1281331-unsplash.jpg") }, { id: 2, title: "Angular RxJs In-Depth", summary: "In this tutorial, we'll learn to use the RxJS 6 library with Angular 6 or Angular 7...", image: require("../images/daniil-silantev-318853-unsplash.jpg") }, { id: 3, title: "How to Create Code Profiles in VS Code", summary: "This post piggybacks off of the work done by @avanslaars who is a fellow instructor at egghead.io....", image: require("../images/vincent-van-zalinge-38358-unsplash.jpg") } ]; export default class Feed extends Component { render() { return ( <View style={styles.container}> <FlatList data={news_items} keyExtractor={(item, index) => item.id.toString()} renderItem={this.renderItem} /> </View> ); } // renderItem = ({ item }) => { return ( <TouchableOpacity onPress={this.goToNews}> <View style={styles.news_item}> <View style={styles.news_text}> <View style={styles.text_container}> <Text style={styles.title}>{item.title}</Text> <Text>{item.summary}</Text> </View> </View> <View style={styles.news_photo}> <Image source={item.image} style={styles.photo} /> </View> </View> </TouchableOpacity> ); }; // goToNews = () => {}; } // const styles = StyleSheet.create({ container: { flex: 1 }, news_item: { flex: 1, flexDirection: "row", paddingRight: 20, paddingLeft: 20, paddingTop: 20, paddingBottom: 20, borderBottomWidth: 1, borderBottomColor: "#E4E4E4" }, news_text: { flex: 2, flexDirection: "row", padding: 15 }, title: { fontSize: 28, fontWeight: "bold", color: "#000", fontFamily: "georgia" }, news_photo: { flex: 1, justifyContent: "center", alignItems: "center" }, photo: { width: 120, height: 120 } }); 

Запуск приложения

На этом этапе вы сможете запустить приложение:

 react-native run-android react-native run-ios 

Попробуйте приложение и посмотрите, работает ли оно лучше, чем React Navigation (если вы использовали его раньше).

Заключение и последующие шаги

Из этого руководства вы узнали, как использовать библиотеку React Native Navigation. В частности, вы узнали, как настроить React Native Navigation и использовать навигацию по стеку и вкладкам. Вы также узнали, как загружать значки из React Native Vector Icons вместо использования значков изображений.

В качестве следующего шага вы можете проверить, как можно настроить анимацию , как реализовать навигацию по боковому меню или просмотреть примеры различных типов макетов .

Если вы все еще не уверены в том, какую библиотеку навигации использовать для вашего следующего проекта, обязательно ознакомьтесь со следующим постом: Реагируйте с навигацией против Реагируйте с собственной навигацией: что вам подходит?

Вы можете найти исходный код примера приложения в этом репозитории GitHub .