react-native 學習心得

呆呆_呆呆發表於2018-09-07
React

需要的工具

Android Studio：這個是針對安卓原生開發的編譯工具
genymotion :這個是安卓模擬器
Xcode :這個是iOS開發的編譯工具
webstorm ：一個自己喜歡的程式碼編譯工具（當然你也可以選擇自己喜歡的編譯工具，個人比較喜歡這個）

推薦學習網站

  1. react native 中文網站 ：環境配置和常用元件，api 都很詳細
  2. RN路由react navigation ：你也可以不使用這個，但是這個是我知道的比較完善的路由導航元件
  3. debug工具 ：debug可以使用自帶的那個工具，這個也是一個在開發中的工具，在原有的基礎上新增了一些功能，可點選進去了解下
  4. js.coach元件庫 ：元件很豐富 ，方便查詢
  5. 前端一部分中文文件目錄 ：突然開啟可能會晃眼，而且感覺頁面做的很盜版，但是東西還是很不錯的

推薦安裝的google外掛

開啟翻牆工具，直接在google商店裡面搜尋名稱即可
1，JSON-handle:幫助方便前端人員看介面資料
2，FeHelper:這個是很萬能的，正規表示式，json轉換，取色等等
3，Clip to Evernote:這個看是可以將當前的頁面儲存到印象筆記上面，如果你沒有使用印象筆記就不推薦了

說在前面

我接觸兩週的感覺是react native和react的差不多，生命週期，元件的使用，介面的呼叫，都還是和react差不多，
但是標籤的使用，樣式的寫法，和路由的使用卻不一樣。

目錄結構介紹

react-native 學習心得

頁面 標籤 樣式 元件 路由 介面呼叫介紹

（一）頁面 ，標籤和樣式

學過react的小夥伴可能更容易上手，新建頁面和react的一樣，
不一樣的是：
1,react一大部分標籤裡面都是可以直接寫文字的，但是這裡除了Text標籤可以直接寫文字，其他的需要在其屬性裡面寫文字，
比如Button，有titie屬性，目前我知道的是 ，所有的標籤都是從react native裡面引用（自定義元件除外）。
2, 樣式是物件的形式，這個可以參看react native官網，
程式碼如下

react-native 學習心得

（二）元件

元件和其他的元件使用方法一樣，不管是vue，還是react,直接引入傳值，程式碼如下：
元件：
import React, {PureComponent} from "react";
import { Text, } from "react-native";

export default class TestOne extends PureComponent {

  render() {
    return (
      <Text>這是一個元件</Text>
    );
  }
}


複製程式碼
在父元件的使用方法是:
import React, { PureComponent } from "react";
import { Button, StatusBar, Text, View,StyleSheet } from "react-native";
import TestOne from '../../components/TestOne';
export default class extends PureComponent {
  render() {
    return (
      <View>
      <TestOne/>
      </View>
    );
  }
}

複製程式碼

（三）路由

配置，上面有介紹，我使用的路由是參react navigation,詳細介紹還是去看文件；
我在頁面資料夾下面建立了一個index的檔案，作為頁面路由的配置，目錄結構如下

react-native 學習心得

程式碼如下： 其他的請參考導航的介面api
import React from "react";
import {
  createStackNavigator,
  createSwitchNavigator,
  createBottomTabNavigator
} from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import HomeScreen from "./Home";
import DetailsScreen from "./Details";
import ModalScreen from "./Modal";
import RegisterScreen from "./Auth/RegisterScreen";
import SignInScreen from "./Auth/SignInScreen";
import SettingsScreen from "./Settings";
import UserSetScreen from "./Settings/UserSetScreen";


const Tab = createBottomTabNavigator( // 這個是tab切換形式的路由
  {
    Home: HomeScreen,
    Settings: SettingsScreen
  },
  {
    navigationOptions: ({ navigation }) => ({  // 這裡是設定tab的樣式，圖片 類似於小程式
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Home") {
          iconName = `ios-home`;
        } else if (routeName === "Settings") {
          iconName = `ios-settings`;
        }

        return <Ionicons name={iconName} size={25} color={tintColor}/>;
      }
    }),
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray"
    }
  }
);

const MainStack = createStackNavigator(  // 普通的頁面跳轉 ，類似於href
  {
    Tab: {    //  這些是可以簡寫的
      screen: Tab
    },
    Details: DetailsScreen,  //  這個就是簡寫的形式Details是路由名稱，DetailsScreen是頁面
    SetUser: {
      screen: UserSetScreen
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: "#f4511e"
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack
    },
    MyModal: {
      screen: ModalScreen
    }
  },
  {
    mode: "modal",     //  設定頁面跳轉的方式 從底部滑入
    headerMode: "none"
  }
);

const AuthenticationNavigator = createStackNavigator({
  SignIn: SignInScreen,
  RegisterScreen: RegisterScreen
});

const AppNavigator = createSwitchNavigator({  // 不可以回退的頁面 類似於 replace
  Auth: AuthenticationNavigator,
  Root: RootStack
});

export default AppNavigator;


複製程式碼
路由配置好了，接下來看如何使用
import React, { PureComponent } from "react";
import { Button, View, Text, StatusBar } from "react-native";

export default class SignInScreen extends PureComponent {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <StatusBar barStyle={"dark-content"} />  // 頭部樣式設定
         // 頁面跳轉 這只是一種方式，其他的還有back push 等
        <Button
          style={sty.title}
          title="Go Sign in"
          onPress={() => this.props.navigation.navigate("Root")} 
        />
        <Button
          title="Go Register"
          onPress={() => this.props.navigation.navigate("RegisterScreen")}
        />
      </View>
    );
  }
}
const sty=  StyleSheet.create({
  title:{
    color:'red',
  }
})


複製程式碼
路由是可以專遞值的 路由的第二個引數是個物件，裡面可以用來傳遞一些值，具體使用如下程式碼
// 這個是home頁面
import React, { PureComponent } from "react";
import { Button, StatusBar, Text, View,StyleSheet } from "react-native";
import TestOne from '../../components/TestOne';
export default class extends PureComponent {
 state = {
   count: 0
 };
 render() {
   return (
     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
       <StatusBar barStyle={"light-content"} />
       <Text>主頁面home</Text>
     <TestOne/>
       <Text>Count: {this.state.count}</Text>
       <Button
         title="去詳情頁面 detail"
         onPress={() => {  //  點選按鈕的時候傳遞了一些值 
           this.props.navigation.navigate("Details", {   
             itemId: 86,
             otherParam: "First Details",
             onChangeTitle: 'title'
           });
         }}
       />
     </View>
   );
 }
}




// 這個是詳情頁面



import React, {PureComponent} from "react";
import { Button, View, Text, StatusBar } from "react-native";

export default class extends PureComponent {
 static navigationOptions = ({ navigation }) => {  
 state = {
   count: 0
 };

 render() {
   const { params } = this.props.navigation.state;
   const itemId = params ? params.itemId : null;
   const otherParam = params ? params.otherParam : null;

   return (
     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
       <StatusBar barStyle={"dark-content"} />
       <Text>Details Screen</Text>
       <Text>itemId: {JSON.stringify(itemId)}</Text>
       <Text>otherParam: {JSON.stringify(otherParam)}</Text>
     </View>
   );
 }
}


複製程式碼
路由的使用還有很多 ，建議去看文件，上面有推薦，謝謝

（四）介面呼叫

介面呼叫和react 呼叫一樣，封裝好request的方法，這裡就不說了，可以參看github程式碼

（五） 未完待續，謝謝！！

相關文章