react-native初体验 — 认识路由

Posted smallcoder

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native初体验 — 认识路由相关的知识,希望对你有一定的参考价值。

如果学习止步于 hello world, 那么人生也太没意思了。这次要做一个看起来真实的应用。多添加几个页面,让他们可以交互,动起来。

react-native 官方推荐使用 react-navigation 作路由管理,下面我将尝试使用他。

根目录下面建立 pages 文件夹,并在里面建立 home.js/user/index.js 两个文件,接下来就可以在这个两个视图之间进行跳转了

mkdir pages
cd pages
touch home.js
mkdir user
cd user
touch index.js

安装路由管理

安装

yarn add react-navigation

引入

// app.js
import { createStackNavigator } from ‘react-navigation‘;

建立路由导航

修改 app.js, 使用 createStackNavigator 创建堆栈卡片式的导航。

import { createStackNavigator } from ‘react-navigation‘;
import Home from ‘./pages/home.js‘;
import Profile from ‘./pages/user/index.js‘;

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

export default App

这里建立了两个视图的导航, yarn ios 试一下,报错了,原因是新建的2个视图面还是空的,没有返回一个 react compontent。现在关掉服务,在里面写2个组件。

多个页面

在两个页面里面随便写一些东西,navigationOptions 是路由的配置项,设置后会自动在视图顶部生成一个原生的导航组件。

  • home.js
// home.js
import ...;

export default class Home extends React.Component {
  static navigationOptions = {
    title: ‘首页‘,
  };
  render() {
    return (...);
  }
}

const styles = StyleSheet.create(...);
  • user/index.js
// user/index.js
import ...;

export default class Home extends React.Component {
  static navigationOptions = {
    title: ‘个人中心‘,
  };
  render() {
    return (...);
  }
}

const styles = StyleSheet.create(...);

跳转和返回

从一个页面跳转到另一个页面,需要调用 navigate 方法, 点击 Button, 会在当前视图上叠加 Profile 视图。点击 Profile 上边的返回按钮,会自动返回到 Home 视图。

// home.js
import ...;

export default class Home extends React.Component {
  static navigationOptions = {
    title: ‘首页‘,
  };
  render() {
  const { navigate } = this.props.navigation;
  return (
    <Button
        title="去个人中心"
        onPress={() =>
          navigate(‘Profile‘, { name: ‘Jane‘ })
        }
     />
    );
  }
}

const styles = StyleSheet.create(...);

以上是关于react-native初体验 — 认识路由的主要内容,如果未能解决你的问题,请参考以下文章

React-native初体验(安卓篇)

Android开发学习之路--React-Native混合开发初体验

Hybird开发初体验之React-Native

路由初体验02

认识JavaScript到初体验

Vertx 路由初体验