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'})}
/>
),
};
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。