背景

在React Native中页面间跳转时需要用到react-navigation库，相关知识点如下

路由管理

使用createStackNavigator创建路由管理器,其中 'home'、'Details'为路由名称，这个名字可以随意定,screen为跳转页面的component名字, initialRouteName可以指定默初始加载的component名字

const RootStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      title: "Home"
    },
    Details: {
      screen: DetailsScreen,
      title: "detail"
    }
  },
  {
    initialRouteName: "Home"
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App2 extends React.Component {
  render() {
    return <AppContainer />;
  }
}

页面切换

• props.navigation.push() 跳转到指定页面
• props.navigation.navigate() 跳转到指定页面
• props.navigation.goBack() 返回到上一个页面
• props.navigation.pop() 返回到上一个页面
• props.navigation.popToTop() 返回到第一个页面

onPress={() => {this.props.navigation.navigate("Details"); }}
onPress={() => this.props.navigation.goBack()}

参数传递

• 需要将参数包装成一个对象，作为navigation.navigate方法的第二个参数传递给路由。如： this.props.navigation.navigate('RouteName', { /* params go here */ })

 this.props.navigation.navigate("Details",{itemId:10,otherParam: 'someDefaultValue'});

• 读取页面组件中的参数的方法：this.props.navigation.state.params

const {navigation} = this.props;
const itemId = navigation.getParam('itemId');
const otherParam = navigation.getParam('otherParam');