Back

reactnative - 2. 新建页面，和跳转

发布时间: 2018-12-20 08:00:00

好麻烦啊。不过不要紧。我们先用官方的这个办法。 React用的是ES6 语言， 官方目前没有一个统一的目录结构。所以我们先了解一下import的知识。（参考http://siwei.me/blog/posts/es6-import-import-a-b-c-from-xx）

本节参考：https://reactnavigation.org/docs/en/hello-react-navigation.html ,
完整代码：https://snack.expo.io/@react-navigation/hello-react-navigation-v3

基本做法

所以，接下来， 我们在原有的项目中，修改3个文件：

1. 根目录下的app.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, Alert} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import Home from 'screens/Home'
import AboutUs from 'screens/AboutUs'

const App = createStackNavigator({
  Home: {
    screen: Home
  },
  AboutUs: {
    screen: AboutUs
  }
})

// 注意这一行绝对不能省略
export default createAppContainer(App)

2. 新建screens文件夹， 包含以下3个文件：

2.1 AboutUs.js

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

export default class AboutUs extends React.Component{
  render(){
    return (
      <View>
        <Text>I am AboutUs </Text>
      </View>
    )
  }

}

2.2 Home.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, Alert} from 'react-native';

export default class Home extends React.Component{
  static navigationOptions = {
    title: "Home"
  }

  render(){
    const {navigate} = this.props.navigation;
    return (
      <Button
        title = "click and jump"
        onPress = { () =>
          navigate('AboutUs', { name: 'Siwei'})
        }
      />
    )
  }
}

2.3. package.json

// 该文件的意义...  好像删了也行？
{"name": "screens"}

然后打开App  ， 点击按钮， 就可以看到页面跳转了。  

进阶

上述代码中， 修改 App.js 如下

const myNavigator = createStackNavigator({
  Home: Home,     //  注意这里的写法变简单了。 
  AboutUs: AboutUs
})

// 这里声名了一个AppContainer 的标签
const AppContainer = createAppContainer(myNavigator)

export default class App extends React.Component {
  render(){
    return <AppContainer />;   // 用在了这里。
  }
}

代码也是一样可以运行的。 官方推荐这样的写法。

关于 this.props.navigation.navigate:

this.props 会引用本screen 中所包含的props, 

this.props.navigation会引用一个对象： navigation, 该对象可以最页面做一些跳转操作， 具体API见：https://reactnavigation.org/docs/en/navigation-prop.html

goBack, 和 push

export default class AboutUs extends React.Component{

  render(){
    // 注意： 这里只是一种用法演示。 destructing assignment
    const {navigate, goBack} = this.props.navigation
    return (
      <View>
        <Text onPress = {() => this.props.navigation.navigate('AboutUs')}
                  >I am AboutUs
        <Button
          title="再次打开该页面"
          //onPress={() => this.props.navigation.navigate("AboutUs")}
          //onPress={() => this.props.navigation.push("AboutUs")}
          onPress={() => navigate("AboutUs")}
          />

        <Button
          title = '返回上个页面'
          //onPress={() => this.props.navigation.goBack()}
          onPress={() => goBack()}
          />

        <Button
          title = '回到首页'
          onPress={() => this.props.navigation.navigate('Home')}
          />

      </View>

    )
  }

}

Back