创建项目： react-native init 项目名
运行项目：右击项目，选择在终端打开，输入命令：npm start
路由导航：1 yarn add react-navigation
2配置路表：不同的路由导不同的包
StackNavigator： import { StackNavigator } from "react-navigation";
TabNavigator ：import { TabNavigator } from "react-navigation"; createBottomTabNavigator：import { createBottomTabNavigator } from "react-navigation";
createSwitchNavigator：import { createSwitchNavigator } from "react-navigation";
路由分类： StackNavigator 跳转页面（详情页面）传值
TabNavigator 顶部导航栏
createBottomTabNavigator 底部导航栏
createSwitchNavigator 身份验证
eg：路由表：import { createTabNavigator } from "react-navigation";
import News1 from "./../js/News1";
import News2 from "./../js/News2";
import News3 from "./../js/News3";
const Ly2 = createTabNavigator({
News1: {
screen: News1,//
navigationOptions: {
title: "新闻1"
}
},
News2: {
screen: News2,
navigationOptions: {
title: "新闻2"
}
},
News3: {
screen: News3,
navigationOptions: {
title: "新闻3"
}
}
});
export default Ly2;
底部导航栏:
使用三方图库：
/**
* 图标使用：
* yarn add react-native-vector-icons
* react-native link
*
* import Ionicons from "react-native-vector-icons/Ionicons";
*
* navigationOptions中配置
*/
import { createBottomTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
const Home = createBottomTabNavigator(
{
Topic: {
screen: Topic,
navigationOptions: {
title: "帖子"
}
},
Publish: {
screen: Publish,
navigationOptions: {
title: "发布"
}
},
My: {
screen: My,
navigationOptions: {
title: "我的"
}
}
},
{
//谁设置文本选中前后效果颜色
tabBarOptions: {
activeTintColor: "#FF0000", //激活文本图片样式
inactiveTintColor: "#0000FF", //未激活文本图片样式
activeBackgroundColor: "#2296F3", //激活背景样式
inactiveBackgroundColor: "#ffffff" //未激活背景样式
},
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === "Topic") {
//切换不同的图标
//iconName = `ios-document${focused ? "" : "-outline"}`;
//iconName = `${focused ? "ios-document" : "ios-document-outline"}`;
iconName = "ios-document";
} else if (routeName === "Publish") {
iconName = "ios-create";
} else if (routeName === "My") {
iconName = "ios-person";
}
return <Ionicons name={iconName} size={25} color={tintColor} />;
}
})
}
);
跳转页面，传值取值：
//跳转到D对应的页面，传递name，age参数
this.props.navigation.navigate("D", { name: "张三", age: "123" });
//在D页面中取值
{this.props.navigation.getParam("name", "AAA")}
