React Native学习二

来源:互联网 发布:基于java的毕业论文 编辑:程序博客网 时间:2024/05/17 22:36

一 React Native 组件的生命周期

    在React Native项目中,所有展示的界面都可以看做是一个组件(Component), 例如在BugShop 项目中的 app.js中

    import React, { Component } from 'react';

    import {
          AppRegistry,
          StyleSheet,
         Text,
         TextInput,
         Button,
         View,
         ScrollView,
         Platform,
         Dimensions
    } from 'react-native';

   export default class buyShop extends Component

   最常用的加载和卸载的函数调用流程如下图

 
 



  StatusBar 组件常用属性的平台兼容性:

  animated 和hidden属性在iOS、Android平台都有效

  backgroundColor 和 translucent 属性只在Android平台有效。

  barStyle、networkActivityIndicatorVisible以及showHideTransition属性只在iOS平台有效。

二、移植项目

    首先 AppRegistry 是所有的React Native 应用的入口,应用的根组件通过AppRegistry.registerComponent方法注册自己,然后原生系统才可以加载 React Native 应用的代码并运行项目流程图如下:

  

   1.更改 index.ios.js

    

   2.复制 app.js到新项目的目录

   3.用Xcode打开新项目 ,运行后:  

根据根视图加载原理进行修改后再次运行

      代码片段:https://github.com/kangxg/React-Native-.git

      运行成功,接下来就进行修改进行电商项目的开发!