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,  
    Text,  
    Button,  
    View,  
} 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 },  
    Chat: { screen: ChatScreen },  
});  

//增加一个右边按钮
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'})}
      />
    ),
  };
};