創(chuàng)建項目： react-native init 項目名
運行項目：右擊項目，選擇在終端打開，輸入命令：npm start
路由導(dǎo)航：1 yarn add react-navigation
? ? ? ? ? ? ? ? ? ?2配置路表：不同的路由導(dǎo)不同的包
? ??????????????????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 ? ? ? ?跳轉(zhuǎn)頁面（詳情頁面）傳值
? ?????????????????TabNavigator? ? ? ? ? ? ? 頂部導(dǎo)航欄? ? ? ? ??
? ? ? ? ? ? ? ? ? ?createBottomTabNavigator? 底部導(dǎo)航欄
? ? ? ? ? ? ? ? ? ?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;
底部導(dǎo)航欄:
使用三方圖庫：
/**
* 圖標使用：
* 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: "發(fā)布"
? ? ? }
? ? },
? ? My: {
? ? ? screen: My,
? ? ? navigationOptions: {
? ? ? ? title: "我的"
? ? ? }
? ? }
? },
? {
? ? //誰設(shè)置文本選中前后效果顏色
? ? 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} />;
? ? ? }
? ? })
? }
);
跳轉(zhuǎn)頁面，傳值取值：
? ? //跳轉(zhuǎn)到D對應(yīng)的頁面，傳遞name，age參數(shù)
? ? this.props.navigation.navigate("D", { name: "張三", age: "123" });
? ? //在D頁面中取值
? ? {this.props.navigation.getParam("name", "AAA")}
