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，他的样式就是我们写在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