react-native React Navigation常用参数配置

###配置标题栏

1. 基本配置

   class MainScreen extends React.Component{
   
     static navigationOptions = {
       title: '主界面',
     };
    //...        
   }
   

2. 动态配置标题栏

   class DetailScreen extends React.Component{
     static navigationOptions = ({navigation}) => {
       return {
         title: navigation.getParam("title","defValue"),//根据上一级传递参数设置标题
       }
     };
     render(){
         const { navigation } = this.props;
         const value1 = navigation.getParam("key1","defValue");
         const value2 = navigation.getParam("key2","defValue");
           return(
               <View style={styles.container}>
                   <Text>这是DetailsScreen!</Text>
                   <Text>传递参数1:{value1}</Text>
                   <Text>传递参数2:{JSON.stringify(value2)}</Text>
                   <Button
                     title='跳转到MainScreen'
                     onPress={()=>{
                       this.props.navigation.navigate('Main')
                     }}
                   />
                    <Button
                     title='参数修改'
                     onPress ={()=>{ //可以动态修改同一key的参数值。
                       this.props.navigation.setParams({"title":"titleUpdated"})
                     }}
                   />    
               </View>
           );
       }
   }
   

navigationOptions具有以下的属性：

• navigation： 屏幕的导航参数，屏幕的路线位于navigation.state。
• screenProps： 从导航器组件上方传递的道具
• navigationOptions ： 未提供新值时将使用的默认或先前选项