05 ReactNavigation入门详解（参照官网文档）(下

头部按钮

1. 通过headerLeft和headerRight来添加左右按钮

class HomeScreen extends React.Component {
  static navigationOptions = ({navigation})=>{
    return {
    // title: 'Home',
    headerTitle:<LogoTitle/>,
    // 同时添加左右键 保证居中
    headerLeft:(
      <Button onPress={()=>navigation.goBack()}
      title ="Back"
      color = "#000"   />
    ),
    // 添加一个右键
    headerRight:(
      <Button onPress={()=> alert('just test')}
      title ="info"
      color = "#839"  
      />
    ),
......下略

在navigationOptions，this指向的不是HomeScreen，所以不能用this来调用。
用自定义的按钮连接goBack方法，可以处理默认返回键返回很慢的问题。

2. js中的 || 运算
   前面看到一个获取参数的例子是这样的

  // 函数传入一个navigation，获取state，设置title
  static navigationOptions = ({navigation,navigationOptions}) =>{
    const {params} = navigation.state;
    return {
      title:params?params.msg:'A Details Screen',
    }
  };

在将头部按钮时，官方又给了一个这样的例子

const params = navigation.state.params || {};

查了下，js中表示，navigation.state.params不为空则赋值，否则使用后面的值赋值。和java的短路或不太一样。
RN不能保证你的screen组件的挂载会优先于你的header，所以params可能为{};
可以通过Redux或者Mobx来实现header和screen的交互

3. 自定义返回按钮

headerBackTitle IOS 有效
headerTruncatedBackTitle 似乎安卓无效
headerBackImage 注意背景色不要覆盖，否则只能看到色块 。
通过设置headerLeft可以覆盖默认返回按钮

Opening a full-screen modal(全屏模态展示)

1. modal
   A modal displays content that temporarily blocks interactions with the main view（临时地阻止与主屏幕的交互，这种展示形式成为模态展示）

2. 建立一个模态页面

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};

    return {
      headerLeft: (
        <Button
          onPress={() => navigation.navigate('MyModal')}
          title="Info"
          color="#fff"
        />
      ),
      /* the rest of this config is unchanged */
    };
  };

  /* render function, etc */
}

class ModalScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 30 }}>This is a modal!</Text>
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="Dismiss"
        />
      </View>
    );
  }
}

const MainStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    /* Same configuration as before */
  }
);

const RootStack = StackNavigator(
  {
    Main: {
      screen: MainStack,// 这个有导航栏
    },
    MyModal: {
      screen: ModalScreen, // 这个没有导航栏
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',// 设置模式 不加Main会有两个导航栏
  }
);

这里实现了两个StackNavigator的嵌套，一个栈是有导航栏的，一个栈是没有的。
模式配置可以是card或者modal，这个对安卓没有影响，只影响ios上的转换效果(modal时从下到上，card是从右到左)
在导航时不需要指定所在的栈，只需要指定页面名称。官方提供了这样一张图。从HOME导航到modal，如果mainstack不能处理，会交给rootstack来处理。

tree.png

其他

1. StackNavigator不能实现图表式的切换，需要使用TabNavigator。这里先不提，参见TabNavigator
2. 想要了解内部机理参见Build your own Navigator
3. 其他API参见API Reference

全部代码