React native

JSX语法

JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到 <,JSX就当HTML解析,遇到 { 就当JavaScript解析。

react native 编写的程序经过安卓studio编译后就是一个原生app ,其开发模式是用react的jsx语法来写的,特别像写前端一样,写页面结构/写js/写一种类似css语法的但不是css,这些可以渲染到写的页面组件里。
react native 玩的也是组件,在node和npm环境下,可以创建一个react native项目,其依赖也是来源于node_modules ,packge.json 也是一个插件安装的列表。react native是一个原生程序,不需要使用到web pack。但是少不了jdk 和andoird环境的配置和相关资源下载/相关集成工具的使用。

  • react native 的基本结构和语法
    index.js

    /** @format */
        //引入资源
        import {AppRegistry} from 'react-native';
        import App from './src/App';    
        import {name as appName} from './app.json';
        //注册组件,程序组件,一般注册一个根组件
        AppRegistry.registerComponent(appName, () => App);
    

    app.js

    //一般在app.js里写的都是顶层路由,在这里可以做一个路由顶层设计,这个app.js是在index.html里面设置的。所以开始就会渲染这个组件 ,其后就是各个子组件的引入和使用,每个组件都是先引入react的资源,或者引入自己写的组件,每个组件都是通过一个默认导出类作为加载的页面,这个类有构造函数,有成员函数,有渲染函数。还有一个react native 资源里面的 StyleSheet对象这个对象专门写组件样式的。
    

构造函数里面有state这个state叫做状态,用来操作组件状态的。在这里state里面设置状态属性,通过状态属性可以做很多灵活的操作。成员函数可以操作这些在构造函数里面设置的状态属性。渲染函数就是render ,这个函数里面可以引用引入的资源的组件,而写一个更大的组件。一个大概的react native 组件就是这样来完成业务的。代码可以根据自己的需求和官方文档的语法去写。这里就不示例了。
```

posted @ 2019-01-21 16:46  QiuYuLing  阅读(287)  评论(0编辑  收藏  举报