react-navigation2.0版之普通页面及切换数据传递

1.数据传递

通过将参数放入一个对象作为navigation.navigate函数的第二个参数传递给参数

this.props.navigation.navigate('RouteName', { /* params go here */ })

2.数据接收

this.props.navigation.getParam(paramName, defaultValue)。

之前我一直使用的是直接访问params对象this.props.navigation.state.params。但是这个可能是null,所以更推荐getParam这种有默认值的
例子：

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>首页</Text>
        <Button
          title="跳转到详情页面，并传递参数"
          onPress={() => {
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    const { navigation } = this.props;
    // NO-ID  some default value  表示默认值
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>详情页面 接收参数</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="用push 可以重复跳转多个详情页面"
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
          title="返回到首页"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="返回到上一个页面"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

总结：push 和navigate 的差别，push不管之前栈里面有没有这个页面，都会重新添加一个。这样栈里面就会有多个相同的页面。而navigate则是有就直接返回，没有就添加一个新的

3.设置页面的头部

设置标题名

createStackNavigator 默认情况下在iOS上，标题将居中，在Android上它将左对齐。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: '首页',
  };
}

传递标题名称

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      // otherParam 参数名 通过这个获取到标题
      // A Nested Details Screen默认标题
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };
}

除了 navigation 还有ScreenProps和 navigationOptions这个两个参数

修改 params的值，比如修改刚刚的标题

 <Button
    title="修改刚刚的标题"
    onPress={() => this.props.navigation.setParams({otherParam: '新的标题名!'})}
  />

自定义头部

部分自定义，假设我只想把title显示成一个自定义组件 或者图片 或者添加保存按钮
iOS上，返回旁边有上一个页面的标题，当标题过长，否则显示“返回”。
headerBackTitle 更改返回按钮的文字
headerBackImage 更改返回图标
headerLeft 自定义返回按钮

class HomeScreen extends React.Component {
  static navigationOptions = {
       headerTitle: <Image />, // 自己配置style和source
       headerRight: (
        <Button
          onPress={() => alert('保存成功')}
          title="保存"
      />
    ),
  };
}

头部的样式

可以通过navigationOptions 控制，比如:

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: '首页',
    //整个头部View的样式
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    // 后退按钮和标题的颜色
    headerTintColor: '#fff',
    // 自定义标题的  fontSize fontWeight fontFamily  
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };
}

不过这些属性建议在createStackNavigator的时候统一配置，然后个别页面有不同的话再单独配置，它会覆盖前面的配置，优先显示页面单独配置的。

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
    ...... 等等等好多页面
  },
  {
     /* 指定初始化路由*/
    initialRouteName: 'Home',
    /* 统一配置所有页面的头部 */
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);