17、React Native 中的屏幕导航与列表渲染

React Native 中的屏幕导航与列表渲染

1. React Native 中的导航

在 React Native 应用中，导航机制与传统网页应用有所不同。网页应用通常依赖 URL 进行导航，而 React Native 则依靠路由对象来实现页面切换。

1.1 导航栏的使用

将导航链接放在独立的部分往往是更好的选择，React Native 提供了 Navigator 组件来指定导航栏。以下是一个示例：

import React from 'react';
import {
  AppRegistry,
  Navigator,
} from 'react-native';
import routes from './routes';
import styles from './styles';

const renderScene = route => (<route.Scene />);

const routeMapper = {
  Title: (route, navigator) => (
    <route.Title navigator={navigator} />
  ),
  LeftButton: (route, navigator) => (
    <route.LeftButton navigator={navigator} />
  ),
  RightButton: (route, navigator) => (
    <route.RightButt