1)配置多个页面
1)在你的 React Native 项目中安装react-navigation这个包
yarn add react-navigation
2)导入依赖创建路由
import { createStackNavigator } from 'react-navigation';、
import Home from "./Home";
import Details from "./Details";
3)创建
const RootStack = createStackNavigator(
{
//两个js页面
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
2)页面切换
<Button
title="跳转详情页面"
onPress={() => this.props.navigation.navigate("Details")}
/>
<Button
title="跳转自己本身Home页面：navigate"
onPress={() => this.props.navigation.navigate("Home")}
/>
<Button
title="跳转自己本身Home页面：push"
onPress={() => this.props.navigation.push("Home")}
/>
<Button
title="返回按钮"
onPress={() => this.props.navigation.goBack()}
/>
3)页面传值:
传值数据A：
<Button
title="跳转详情页面,实现传递参数"
onPress={() =>
this.props.navigation.navigate("Details", { name: "张三", age: 20 })
}
/>
接收数据B：
this.props.navigation.getParam("name", "admin")
4)配置标签栏
//1.设置默认标题
static navigationOptions = {
title: "Home"
};
//2.设置参数作为标题
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam("name", "Details")
};
};
//3.单个页面更改样式
static navigationOptions = {
title: "Home",
headerStyle: {
backgroundColor: "#0000f4"
},
headerTintColor: "#605",
headerTitleStyle: {
fontWeight: "bold"
}
};
//4.在路由表中配置样式，实现多个页面共享样式
const Route = createStackNavigator(
//配置路由页面
{
Home: {
screen: Home
},
Details: Details
},
{
//配置初始化页面
initialRouteName: "Home",
//跨页面共享标题栏设置
navigationOptions: {
headerStyle: {//标题栏背景样式
backgroundColor: "#f4511e"
},
headerTintColor: "#fff", //标题栏文本颜色
headerTitleStyle: {//标题栏文本样式
fontWeight: "bold"
}
}
}
);
//5.标题栏设置
header: null,
headerLeft: (
),
headerRight: (
)
二、底部导航栏，顶部导航栏
createTabNavigator（或者TabNavigator）
createBottomTabNavigator
案例：
//顶部导航栏
const Route2 = createTabNavigator({
New1: New1,
New2: New2
});
//底部导航栏
const Route2 = createBottomTabNavigator({
Home: {
screen: Home,
navigationOptions: {
title: "首页"
}
},
New: {
screen: Route3,
navigationOptions: {
title: "消息"
}
},
My: {
screen: My,
navigationOptions: {
title: "我的"
}
}
});
网友评论