react-navigation路由基础信息与头部标题栏配置（笔记）

1.创建视图容器（createAppContainer）和路由栈（createStackNavigator）；

2.路由信息获取可以通过this.props.navigation;

3.navigation内包含信息与方法：

    push:向视图堆栈直接写入视图路径；

    navigate：直接指向所要跳转的视图；

    goBack：从视图堆栈中取出后进的视图路由信息，跳转到目标视图，且移除此视图信息；

4.路由传值与取值：

   /* 1. 通过路由传值 */

  this.props.navigation.navigate('Details', { itemId: 86, otherParam: '键值', });

/* 2. 通过props获取键值 */

const { navigation } = this.props;//当前路由信息

const itemId = navigation.getParam('itemId', 'NO-ID');//传入键名获取信息

5.设置页面title（单页面）:

/*设置navigationOptions 静变量配置title信息*/

static navigationOptions = { title: 'Details', };

/*通过动态事件更新navigationOptions信息，setParams来配置*/

onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}

 6.配置标题栏样式：

  headerStyle：标题栏dom样式信息；

  headerTintColor：标题栏按钮的文本颜色（只能编辑字体颜色）；

  headerTitleStyle：页面名称样式（可编辑其他样式属性）；

  例：static navigationOptions = {

               title: 'Home',

               headerStyle: {

                    backgroundColor: '#f4511e',

               },

               headerTintColor: '#fff',

               headerTitleStyle: {

                     fontWeight: 'bold',

               },

           };

7.跨页面头部样式配置：

  在路由注入时添加defaultNavigationOptions: {

       headerStyle: {

           backgroundColor: '#f4511e',

        },

        headerTintColor: '#fff',

        headerTitleStyle: {

             fontWeight: 'bold',

        }

       单页面title配置可以覆盖公共配置

8.自定义组件替换title：

    我们可以通过用自己的title替换默认的title；

    class LogoTitle extends React.Component {

        render() {

              return (

                      <Image source={require('./spiro.png')} style={{ width: 30, height: 30 }} />

                 );

           }

      }

      class HomeScreen extends React.Component {

            static navigationOptions = {

                   // 导入title标签

                   headerTitle: <LogoTitle />,

                   headerBackTitle(headerTruncatedBackTitle):"返回按钮文本"，

                   headerBackImage ：可用图片替换返回文本

        }; /* render function, etc */ }

   9.标题栏按钮：

     a.可通过navigationOptions={headerRight: ( <Button onPress={() => alert('This is a button!')} title="Info" color="#fff" /> )}配置右边按钮（headerRight）