react-native初体验 — 认识路由

Posted 2020-11-12 smallcoder

如果学习止步于 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(...);