React-navigation之StackNavigator_2进阶

完整代码：

import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button,
  ScrollView,
} from 'react-native';
import { StackNavigator } from 'react-navigation';


const BaseScreen = ({navigation, banner}) => (  
    <ScrollView>  
        <Text style = {{fontSize : 30 , color : 'red' }}>{banner}</Text>  
        <Text></Text>
        <Button  
            //传参数测试
            onPress={() => navigation.navigate('Chat', { name: 'Jane' })}  
            title="Go to a chat screen"  
        />  
         <Text style = {{width : 20 }}></Text>
          <Text></Text>
        <Button  
            //模式测试
            onPress={() => navigation.navigate('Profile', { name: 'profile' })}  
            title="Go to a profile screen"  
        />  
        <Text style = {{width : 20 }}></Text>
        <Text></Text>
        <Button
            //header 测试
            onPress = {()=> navigation.navigate('HeaderTest')}
             title="Go to a header screen"
        />
         <Text style = {{width : 20 }}></Text>
         <Text></Text>
        
        {navigation.state.routeName === 'HeaderTest' &&
             // 这句代码意思是：当跳转的界面是HeaderTest时，显示  "Toggle Header" 按钮 即在HeaderTest界面显示该按钮
             <Button
                 title="Toggle Header"
                 //  headerVisible 的默认值为 undefined 第二次 true 第三次  false 第四次 true ....
                 onPress={() =>navigation.setParams({
                           headerVisible: !navigation.state.params ||!navigation.state.params.headerVisible,
                       })
                 }
              />
        }
         <Text style = {{width : 20 }}></Text>
         <Text></Text>
         <Button  
            //返回
            onPress={() => navigation.goBack(null)}  
            title="Go back"  
        />  
        <Text style = {{width : 20 }}></Text>
    </ScrollView>  
);  


const HomeScreen = ({navigation}) => ( 
  <View>
     <BaseScreen  
        banner="Home Screen"  
        navigation={navigation}  
    />  
  </View> 
    
);  


HomeScreen.navigationOptions = ({navigation}) =>{
	return {
          // 展示数据 "`" 不是单引号 
         title: 'home Screen',
            //导航栏的style
         headerStyle: {
                backgroundColor: '#fff'
            },
            //导航栏的title的style
         headerTitleStyle: {
                color: 'green',
                //居中显示
                alignSelf : 'center',
         },
         //按压返回按钮显示的颜色 API > 5.0 有效
         headerPressColorAndroid : 'blue',
         //返回按钮的颜色
         headerTintColor : 'red',
         //是否允许右滑返回，在iOS上默认为true，在Android上默认为false
         gesturesEnabled: true,
	};
};


const ChatScreen = ({navigation}) => (  
	<View>
        <BaseScreen  
           banner={`${navigation.state.params.name}'s Photos`} 
           navigation={navigation}  
        />  
	</View>
   
); 

ChatScreen.navigationOptions = {
     title : "chat screen"
};


const ProfileScreen = ({navigation}) => (  
	<View>
        <BaseScreen  
           banner={  
             `${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''}
              ${navigation.state.params.name}'s Profile`  
           }  
           navigation={navigation}  
        />  
	</View>
   
); 


ProfileScreen.navigationOptions = ({navigation}) => {
	return {
         title : `${navigation.state.params.name}`,
         //右边按钮
         headerRight:(  
         	<View>
                <Button  
                   //
                   title= {navigation.state.params.mode === 'edit' ? 'Done' : 'Edit'}
                   //注意 setParams 是对象navigation中的 函数  下面的代码实现模式切换 
                   onPress={() => navigation.setParams({ mode: navigation.state.params.mode === 'edit' ? '' : 'edit' })}  
                />  
         	</View>   
        ),
	};
};

//header 测试 
const HeaderTestScreen = ({ navigation }) => (
	<View>
        <BaseScreen  
           banner={'Full screen view'} 
           navigation={navigation}  
        />  
	</View>
);

HeaderTestScreen.navigationOptions = ({ navigation }) => {
  const headerVisible = navigation.state.params && navigation.state.params.headerVisible;
  console.log("-------headerVisible---------->");
  console.log(headerVisible);
  return {
    header: headerVisible ? undefined : null,
    title: 'Now you see me',
  };
};


// MyFirstProject 是你的react native 项目名  注意： 这块代码要放置到HomeScreen，ChatScreen...的下面否则会出错：Home不存在。
const MyFirstProject = StackNavigator({
  Home: { screen: HomeScreen ,
          // Optional: When deep linking or using react-navigation in a web app, this path is used:
          path: 'home/:name',
         // The action and route params are extracted from the path.
  },
  Chat: { screen: ChatScreen },
  Profile: {screen: ProfileScreen},
  HeaderTest:{screen: HeaderTestScreen},
  // navigationOptions: {}  // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. 
},{
	initialRouteName: 'Home', // 默认显示界面
    onTransitionStart: ()=>{ console.log('导航栏切换开始'); },  // 回调
    onTransitionEnd: ()=>{ console.log('导航栏切换结束'); },  // 回调
    mode : 'card',
    headerMode: 'screen'

});


AppRegistry.registerComponent('MyFirstProject', () => MyFirstProject);

效果图：

参考： 资料