在Snack中创建双屏应用

在React Native应用中，通常需要使用多个屏幕，并且用户需要从一个屏幕切换到另一个屏幕。本文介绍了制作双屏应用的两种不同方法，用户可以在屏幕之间进行切换。在示例1中，我们使用了’react-navigation’中的createStackNavigator模块来实现导航，而在示例2中，我们使用createSwitchNavigator来创建导航。

步骤

步骤1

步骤1 - 从’react-navigation’中导入createStackNavigator模块

步骤2 - 创建App.js并在javascript文件中编写从一个屏幕导航到另一个屏幕的代码

步骤3 - 在App.js文件中创建两个屏幕类(My_Home和My_School)

步骤4 - 设置导航选项，如标题和头部样式

步骤5 - 编写从My_Home导航到My_School再回到My_Home的代码

步骤6 - 即时在线上查看结果

步骤2

步骤1 - 创建一个screens文件夹，并创建名为FirstScreen.js和SecondScreen.js的javascript文件，在这些文件中编写FirstScrr和SecondScrr的代码

步骤2 - 从’react-navigation’库中导入createAppContainer和createSwitchNavigator模块

步骤3 - 创建App.js并编写从FirstScrr到SecondScrr再回到FirstScrr的代码

步骤4 - 使用按钮的onPress()函数实现从FirstScrr到SecondScrr再回到FirstScrr的跳转

步骤5 - 即时在线上查看结果

多种方法

我们提供了不同的解决方案：

使用’react-navigation’中的createStackNavigator模块
使用’react-navigation’库中的createAppContainer和createSwitchNavigator模块

让我们逐个查看程序及其输出。

方法1：使用’react-navigation’中的createStackNavigator模块

项目中的重要文件

App.js
Package.json
两个图片文件myhome.jpg和myschool.jpg

App.js： 这是主要的javascript文件。

示例

import {Component} from 'react';
import { Button,Image, View } from 'react-native';
import {createStackNavigator} from 'react-navigation';

export default class TheTwoScreenApp extends Component {
   render() {
      return <TheTwoScreenNavigator />;
   }
}

class My_Home extends Component {
   navopt = { 
      title: 'The Home',
      headerStyle: {backgroundColor:"#499AC8"}
   };
   render() {
      return (
         <View
            style={{
               flex: 1,
               justifyContent: 'center'
            }}>

            <Image
               style={{ width: 300, height: 300, margin:15 }}
               source={require('./myhome.jpg')} />
            <Button
               title="Go to Your School"
               onPress={() =>
              this.props.navigation.navigate('My_School')
            }
            />
         </View>
      ); 
   }
}

class My_School extends Component {
   navopt = {
      title: 'The School',
      headerStyle: {backgroundColor:"#499AC8"}
   };
   render() {
      return (
         <View
            style={{
               flex: 1,
               justifyContent: 'center',
            }}>
            <Image
               style={{ width: 300, height: 300, margin:15 }}
               source={require('./myschool.jpg')} />
            <Button
               title="Go back to Your Home"
               onPress={() =>
               this.props.navigation.navigate('My_Home')
            }
            />
         </View>
      );
   }
}
const TheTwoScreenNavigator = createStackNavigator(
   {
      My_Home: My_Home,
      My_School: My_School,
   },
);

Package.json ：这是包含所需依赖项的文件。

示例

{
   "dependencies": {
      "react-navigation": "2.0.0-rc.2",
      "@expo/vector-icons": "^13.0.0"
   }
}

查看结果

起始屏幕输出

结果可以在线上查看。

在Snack中创建双屏应用

显示启动屏幕（主页）作为Web视图

下一个屏幕输出

如果用户从第一个屏幕点击按钮，导航会跳转到下一个屏幕。

在Snack中创建双屏应用

显示下一个屏幕（学校）作为Web视图。

方法2：使用createAppContainer和createSwitchNavigator来自库’react-navigation’

项目中重要的文件

文件夹名称屏幕中包括FirstScreen.js和SecondScreen.js
App.js
两个图像文件myhome.jpg和myschool.jpg

FirstScreen.js：这是包含FirstScrr代码的javascript文件

示例

import {Component} from 'react';
import {View,Button, Text, Image, StyleSheet} from 'react-native';

export default class FirstScrr extends Component {
   render() {
      return (
         <View style={styles.mainSpace}>
            <Text style={{textAlign:"center", fontSize:30, color: "#357EC7"}}>The Home</Text>
            <Image
                style={{ width: 304, height: 304, margin:15, paddingTop: 40}}
               source={require('../myhome.jpg')} />
            <Button
               title="Go to Your School"
               onPress={() =>
               this.props.navigation.navigate('SecondScrr')
            }
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   mainSpace: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 36,
      backgroundColor: '#ecf0f1',
   },
});

SecondScreen.js：这是包含 Second Screen 代码的javascript文件

示例

import{Component}from'react';
import{View,Button,Text,Image,StyleSheet}from'react-native';

exportdefaultclassSecondScrrextendsComponent{
   render(){
      return(
         <Viewstyle={styles.mainSpace}>
            <Textstyle={{textAlign:"center",fontSize:30,color:"#357EC7"}}>TheSchool</Text>
            <Image
               style={{width:304,height:304,margin:15}}
               source={require('../myschool.jpg')}/>
            <Button
               title="GobacktoYourHome"
               onPress={()=>
                  this.props.navigation.navigate('FirstScrr')
            }
            />
         </View>
      );
   }
}
conststyles=StyleSheet.create({
   mainSpace:{
      flex:1,
      alignItems:'center',
      justifyContent:'center',
      marginTop:36,
      backgroundColor:'#ecf0f1',
   },
});

App.js：这是此项目的主要 JavaScript 文件。

示例

import {Component} from 'react';
import {View} from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import FirstScrr from './screens/FirstScreen';
import SecondScrr from './screens/SecondScreen';

export default class TheTwoScreenDemoExample extends Component {
   render() {
      return (
         <View>
            <AppBox />
         </View>
      );
   }
}

var AppNav = createSwitchNavigator({
   FirstScrr: FirstScrr,
   SecondScrr: SecondScrr,
});

const AppBox = createAppContainer(AppNav);