react-navigator

StackNavigator 导航栏

API: StackNavigator(RouteConfigs,StackNavigatorConfig)

// 注册导航
const Navs = StackNavigator({
    Home: { screen: Tabs },HomeTwo: {
        screen: HomeTwo,// 必须,其他都是非必须
        path:'app/homeTwo',使用url导航时用到,如 web app 和 Deep Linking
        navigationoptions: {}  // 此处设置了,会覆盖组件内的`static navigationoptions`设置. 具体参数详见下文
    },HomeThree: { screen: HomeThree },HomeFour: { screen: HomeFour }
},{
    initialRouteName: 'Home',// 默认显示界面
    navigationoptions: {  // 屏幕导航的默认选项,也可以在组件内用 static navigationoptions 设置(会覆盖此处的设置)
        header: {  // 导航栏相关设置项
            backTitle: '返回',// 左上角返回键文字
            style: {
                backgroundColor: '#fff'
            },titleStyle: {
                color: 'green'
            }
        },cardStack: {
            gesturesEnabled: true
        }
    },mode: 'card',// 页面切换模式,左右是card(相当于iOS中的push效果),上下是modal(相当于iOS中的modal效果)
    //让安卓实现push动画
    headerMode: 'screen',transitionConfig:()=>({
        screenInterpolator:CardStackStyleInterpolator.forHorizontal,})
    
    onTransitionStart: ()=>{ console.log('导航栏切换开始'); },// 回调
    ontransitionend: ()=>{ console.log('导航栏切换结束'); }  // 回调
});

//页面跳转传参
navigate('Detail',{
     title:'图片详情',url:item.url,// 跳转的时候携带一个参数去下个页面
     callback: (data)=>{
          console.log(data); // 打印值为：'回调参数'
     }
});
const {navigate,goBack,state} = this.props.navigation;
// 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
state.params.callback('回调参数');
goBack();

//通过static navaigationoptions来初始化页面
//属性给params
componentDidMount(){
    this.props.navigation.setParams({
        title:'自定义Header',navigatePress:this.navigatePress
    })
}
navigatePress = () => {
    alert('点击headerRight');
    console.log(this.props.navigation);
}
//接下来就可以通过params方法来获取点击事件了
static navigationoptions = ({ navigation,screenProps }) => ({
    title: navigation.state.params.title,headerRight:(
        <Text onPress={navigation.state.params.navigatePress}>
            返回
        </Text>
    )
});

demo1:

import React from 'react';  
import {  
    AppRegistry,Text,Button,View,} from 'react-native';  
import { StackNavigator } from 'react-navigation';  
  
class HomeScreen extends React.Component {  
    static navigationoptions = {  
        title: 'Welcome',};  
    render() {  
        const { navigate } = this.props.navigation;  
        return (  
            <View>  
                <Button  
                    onPress={() => navigate('Chat',{user: 'xh'})} 
                    title="Chat with xh"  
                />  
            </View>  
        );  
    }  
}  
  
class ChatScreen extends React.Component {  
    static navigationoptions = ({ navigation }) => ({  
        title: `Chat with ${navigation.state.params.user}`,});  
    render() {  
        const { params } = this.props.navigation.state;  
        return (  
            <View>  
                <Text>Chat with {params.user}</Text>  
            </View>  
        );  
    }  
}  
  
const ReactNavigation = StackNavigator({  
    Home: { screen: HomeScreen },Chat: { screen: ChatScreen },});

TabNavigator 标签栏

const MyTab = TabNavigator({
   Home: {
        screen: Home,navigationoptions:{
            tabBarLabel: '首页',tabBarIcon: ({tintColor}) => (
                <Image
                    source={{uri : ''}}
                    style={[tabBarIcon,{tintColor: tintColor}]}
                />
            ),},{
    tabBarPosition: 'bottom',swipeEnabled:false,animationEnabled:false,tabBarOptions: {
        style: {
            height:49
        },activeBackgroundColor:'white',activeTintColor:'#4ECBFC',inactiveBackgroundColor:'white',inactiveTintColor:'#aaa',showLabel:false,}
});

demo2:

import React from 'react';  
import {  
    AppRegistry,} from 'react-native';  
  
import { StackNavigator } from 'react-navigation';  
import { TabNavigator } from 'react-navigation';  
  
class ChatScreen extends React.Component {   
    static navigationoptions = ({ navigation }) => ({  
        title: `Chat with ${navigation.state.params.user}`,});  
    render() {   
        const { params } = this.props.navigation.state;  
        return (  
            <View>  
                <Text>Chat with {params.user}</Text>  
            </View>  
        );  
    }  
}  
  
class Home1Screen extends React.Component {  
    render() {  
        const { navigate } = this.props.navigation;  
        return (  
            <View>  
                <Button  
                    onPress={() => navigate('Chat',{user: 'user1'})} 
                    title="Chat with user1"  
                />  
            </View>  
        );  
    }  
}  
  
class Home2Screen extends React.Component {  
    render() {  
        const { navigate } = this.props.navigation;  
        return (  
            <View>  
                <Button  
                    onPress={() => navigate('Chat',{user: 'user2'})} 
                    title="Chat with user2"  
                />  
            </View>  
        );  
    }  
}  
  
const ScreenNavigator = TabNavigator({  
    Home1: { screen: Home1Screen },Home2: { screen: Home2Screen },});  
  
ScreenNavigator.navigationoptions = {  
    title: 'index title',};  
  
const ReactNavigation = StackNavigator({  
    Home: { screen: ScreenNavigator },});  

//增加一个右边按钮
static navigationoptions = ({ navigation }) => {
  const {state,setParams} = navigation;
  const isInfo = state.params.mode === 'info';
  const {user} = state.params;
  return {
    title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,headerRight: (
      <Button
        title={isInfo ? 'Done' : `${user}'s info`}
        onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
      />
    ),};
};