React Native 從入門開始

簡單說說 React Native的幾個優點

1.跨平臺

2.開發成本低

3.性能高

4.支持動態更新

用了 React Native 有哪些好處呢，就是一套代碼同時可以在Android和ios上應用，提高了代碼的複用率

 

搭建開發環境

1.需要安裝Note.js

2.需要安裝React Native 的命令行工具 React Native Command Line

3.開發安卓的Android Studio /  開發ios 的X Code

在Windows平臺上搭建React Native的開發環境

先安裝Node.js   https://nodejs.org/en/download

安裝教程如下

https://www.runoob.com/nodejs/nodejs-install-setup.html

安裝成功之後我們在安裝React Native的命令行工具

npm install -g react-native-cli

react-native --help命令來查看 RN支持的命令

react-native upgrade 加載安卓ios庫

//終端的顯示

Microsoft Windows [版本 10.0.17134.1]
(c) 2018 Microsoft Corporation。保留所有權利。
//查看版本 查看node.js是否安卓成功
C:\Users\Administrator>npm -v
6.13.4
//安裝react native 的環境
C:\Users\Administrator>npm install -g react-native-cli

C:\Users\Administrator\AppData\Roaming\npm\react-native -> 

C:\Users\Administrator\AppData\Roaming\npm\node_modules\react-native-cli\index.js
+ [email protected]
added 72 packages from 25 contributors in 66.181s

之後呢就安裝我們的Android Studio

創建我們的第一個RN項目

打開終端輸入 react-native init +項目名

創建完成後目錄是這樣的

將我們的android studio打開 加載目錄下的android目錄

這是加載js的配置

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }
        //這裏是加載我們的運行的第一個頭文件
        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this); // Remove this line if you don't want Flipper enabled
  }

  /**
   * Loads Flipper in React Native templates.
   *
   * @param context
   */
  private static void initializeFlipper(Context context) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
        aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

打開終端保證設備連接，調到我們項目的目錄，執行 npm install

在執行react-native run-android 即可安裝到我們的設備上

這個時候我們可以開始開發我們的RN項目了

首先我們找到App.js這個文件

import React from 'react';
import{View,Text,StyleSheet} from 'react-native';
const App = () =>{
  return(
    <View style={Styles.container}>
    //編寫我們的佈局，嵌套各種佈局
    </ZiDingYi>
    </View>
  );
};
//定義每個組件的樣式
const Styles = StyleSheet.create(
  {
    container:{
      flex: 1,
      alignItems:'center',
    }
  });
 //寫完不要忘記導出    
export default App 

上面中的</ZiDingYi>標籤我們可以，寫一個自定義的組合視圖，然後export導出，在App.js中import導入我們編寫的ZiDingYi,比如本頁面導出的是App我們也可以在別的頁面中使用App這個頁面

常用的控件屬性就是我們在給控件設置樣式時，比如要設置大小顏色什麼的，可以直接在的屬性中設置

 <View style={Styles.container}>

比如這行代碼，我們定義了一個View，他的樣式就是我們寫在Styles中的container樣式，這樣我們可以給我們的控件設置各種樣式，完成我們想要做的頁面。

FlexBox佈局的常用的屬性

        //flex 控制權重的，類似安卓裏 LineaLayout 中的weight, 但是在這裏有點不同，在RN當中，
        //這個是表示充滿父容器。如果是根節點，那麼就會充滿整個屏幕。
        //flexDirection 子集標籤排列方向
        //justifyContent 設置橫軸的對其方式
        //alignItems 設置豎軸的對其方式

還有很多內容大家想學習可以查閱RN的中文API :https://reactnative.cn/docs/view/                           

接下來我們寫一個網絡請求，點擊每個item吐司，item爲圖文混排主要實現效果是這樣的

import React, { Component } from 'react';
import{View,Text,FlatList,Dimensions,
TouchableOpacity,ToastAndroid,Image} from 'react-native';
//獲取屏幕的寬高
var width = Dimensions.get('window').width
var height= Dimensions.get('window').height
var url ="http://www.qubaobei.com/ios/cf/dish_list.php?stage_id=1&limit=10&page=1"

class App extends Component{
  //構造
    constructor(props){
      super(props);
      //定義state，當state改變時，會重新調用我們的render函數重新繪製我們的View
      //舉個例子就是我們給我們的一個Text組件賦一個變量，當這個變量值改變時就會重新繪製我們的Text從而動態改變Text顯示的內容
      this.state = {
        datas : []
      }
    }
    //Rn的生命週期，頁面創建時調用
    componentDidMount(){
      this.loadData()
    }
    //網絡請求我們的數據
    loadData(){
      //調試的時候可以打印
      console.warn("asdasdasd")
      //加載我們的url
      fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        //responseJson就是我們轉換成的json對象可以直接調用這個對象中的屬性，也就是json對象中的屬性
        console.warn(responseJson.data)
        //更新我們的state，改變頁面顯示的數據
        this.setState({
          datas:responseJson.data
        })
        console.warn(responseJson)
        
      })
      //當請求失敗的時候我們在這裏處理
      .catch((error) => {
        console.error("cuowu65465464");
      });
    }
    //render函數就是繪製我們的View，他也只能返回一個View
    render(){
      return(
        <View style = {{flex:1}}>
          {/* 類似我們的ListView */}
            <FlatList
            // 設置數據源
            data = {this.state.datas}
            renderItem={({item}) => 
            // 在這裏我們可以通過Index來判斷返回我們想要的View，從而實現了多佈局
            <TouchableOpacity onPress = {()=>{ToastAndroid.show(item.title,ToastAndroid.SHORT)}}> 
              <View style={{flexDirection:'row',backgroundColor:"#f34f56",margin:2}}>
                <Image source = {{uri:item.pic}} style = {{width:50,height:50,backgroundColor:"#f00",borderRadius:45}}></Image>
                <Text style = {{textAlign:'center',margin:1,flex:1,textAlign:'center'}}>
                  {item.title}
                </Text>
              </View>
            </TouchableOpacity>}/>
        </View>
      )
    }
}
//導出
export default App