1. ReactNative 基础

Posted 2020-08-09 阿甘左

/**

 1. reactNative  反应式语言

 2. 既拥有原生的用户体验,又保留React的开发效率

 3. FaceBook研究

    H5,android,ios

 4. BAT的插件化,热修改  2015/9/15

    主流React Native 技术比较有效

    Android版本稳定更加火爆

    可以使用javascript和React跨平台开发

    learn once,write everywhere(最具有魅力)

    Web/iOS/Android －》Virtual DOM -> React(JS/JSX)对iOS底层组建进行包装,运行时系统

    React Native提倡组件化开发,即提供一个个封装号的组件,组件相互嵌套形成新的组件。

    追去极致的用户体验,实时的热部署

    运行时和虚拟DOM对iOS底层进行了包装

 5. support platform

    iOS7,Android 4.1

 6. 版本更新速度快,没有身后的javaScript基础,

    a.功能 适中,交互一般

 7. 配置环境

    Homebrew 是一个资源管理器包,OS X的套件

    ruby...

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)

 

 */

 

/**

基本语法

 1. jScript是由 ECMScript,javaScript和jScript

    ES5, 最新ES6(某些浏览器不支持) 

 2. react Native中任何一个类可以通过注册一个组件,面向组件编程,任何一个类都能够通过组件进行注册.

      2.1 从react框架中注册组件,这是一个固定的格式写法。 import为导入头文件,{标示需要注册的类型

     import Rect, { Compoment } from ‘react‘;  

      2.2 对组册的组件 compoment样式的详细描述。指定需要注册哪些组件。

     import {     //注册组件的类型

     AppRegistry, //注册

     StyleSheet,  //样式

     Text,        //文本组件

     View,        //视图组件

     Image        //图像组件

     TextInput,   //输入框的组件

     } from ‘react-native‘;

 3. react native中类的定义 

    //定义了一个类,它的类型为一个组件

    class AHelloWorld extends Component {

      //初始化方法,通过  render(){ } 对该组件进行渲染。  

     render(){   //相当于OC中的ViewDidLoad方法,加载视图

      //通过return返回, 采用return(); 返回一个布局好的视图, 视图定义在（）内。

      return (

      <View style={styles.container}>

         <Text style={styles.weclome}>您号世界,</Text>

         <Text style={styles.instuctions}> to get started,edit index.ios.js</Text>

         <Text style={styles.instuctions}> Press Cmd+R to reload,{\‘n‘} Cmd + D or shake for dec menu </Text>

      </View>

            );

       }

    }

    上述事例行中 <Text>Hello world!</Text>  在javaScript中嵌入的XML结构的语法，键程

   //定义外部样式变量 （{代码块})    备注 ({})代表了一个封闭的代码块，在OC中为了将一个方法内部的实现拆分也可以使用此方法。这个代码快里可以简单的理解为一组模型对象,通过styles. 语法获取对应的对象。 当视图属性加载的时候会从对应的对象中以KVC的方式读区对应的value给视图设置响应的外观属性。有点点类似于HTLML5

 const styles = StyleSheet.create({

    container:{

        flex:1,

        jstifyContent:‘center‘,

        alignItems:‘center‘,

        backgroundColor:‘#F5FCFF‘

     },

     weclome: {

        fontSize:20,

        textAlign:‘center‘,

        color:"#3333333",

        marginBottom:5,

     }

     instructions: {

 

     }

 })

// 注意，这里用引号括起来的‘HelloWorldApp‘必须和你init创建的项目名一致

 AppRegistry.registerComponet(‘AHelloWorld‘,() => AhelloWorld);

 */

 

 /**

  1.初始化项目

    > cd iOS项目名称

     react-native init BViewDemo

    > 在appDleage中定义

     //下面定义了一个jsCode的路径,我们可以将自己写的代码放在app本地通过bundle加载,也可以将其放在服务器端,通过联网后远程加载,这样既能够不占用app内存,同时也方便实时的进行热部署。通常这个方法都写在app didLaunchWithOptions方法中。这样便于程序启动的时候直接跳转到我们的react Native页面

      NSURL jsCodeLocation = [NSURL URLWithString:@"htpp://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

      RCTRootView* rootView = [RCTRootView alloc]initWithBundleURL:jsCodeLocaiton numduleName:@"BViewDemo initialProperties:nil launchOptions:lanchOptions"];

      self.window.rootViewController = [UIViewController new];

  

  2. JSX和组件的核心理念

     React的核心机制是虚拟DOM（Document Object Model）,可以在内存中创建虚拟的DOM元素,React利用虚拟DOM来减少DOM的操作从而提升性能,传统的创建方法 。

      var newBox = docment.creatElement(‘div‘);

      newBox.className = ‘box‘;

      $(‘main‘).appendChild(newBox);

  

      var newPic = document.createElement(‘div‘);

      newPic.className = ‘pic‘;

      newBox.appendChild(newpic);

      

      var newImg = doucment.createElement(‘img‘);

      new.src = ‘images/‘ + data.img[i].src;

      newPic.appendChild(newImg);

     

      var root=(

       <div className="box">

         <div className="pic">

            <img src = "images/1.jpg"/>

         </div>

       </div>

      );

  3.View组件中常用的属性

    UIView, android.view,或者网页中<div></div>组件, 左边列举项都代表着视图。

    Flexbox:弹性布局组件

    Transforms:动画属性

    backfraceVisibility，,定义页面反转是否可见

    elevation. 是否显示立体高度

  */

 

  4. 组件与AppRegistery

      上述代码中定义了一个名为HelloWorlApp的新的组件(component),并且使用了AppRegistry的内置模块进行了注册操作,在编写ReactNative应用时,肯定会写出很多新的组件.而App的最终界面,也其实就是各种样式的组合,组件本省的机构可以非常简单,惟一必须就是在render方法中返回一些用于渲染结构的jxs语句。

     AppRegistry模块则是告诉ReactNative哪一个组件被注册为整个应用程序的根容器,你无须在此深究,因为一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次,上面的代码已经包涵了具体的用法. 只需要将文件中的代码复制到index.ios.js或者index.android.js文件中运行。