React Native编译器的配置以及基础知识

时间：2022-09-04 09:37:28

　　入职新公司，这边打算采用RN来写界面，所以学习一波这一块的知识。

　　采用的是WebStorm来编译，据同事说，比他采用atom编译要多很多语法提示。
　　下载地址：https://www.jetbrains.com/webstorm/
　　安装之后需要破解：http://blog.csdn.net/zhalcie2011/article/details/57409082
　　进入WebStorm，进行基础配置，诸如RN语法高亮等：http://blog.csdn.net/xiangzhihong8/article/details/52293896
　　语法提示插件：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
　　配置完成之后，RN相关Api、关键字等都有提示，算是比较友好了。

　　RN项目基础配置　　　　

import React, {Component} from 'react';

import
{
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

 import与iOS一致，是导入组件or面向组件，其中默认组件是不需要{}包裹起来的，比如说React，但是Component、Appregistry、Text等组件都是非默认组件，所以需要用{}包裹起来。

class MyApp extends Component {
    render() {
var str = 'ppppppppppppppp';
return (

<View style={{backgroundColor: 'red', flex: 1}}>
                <Text style={{flex: 1}}>{str}</Text>
            </View>
        )
    }
}

上面的代码是自定义程序入口组件，类似于[[UIView alloc] init]，当一个组件要显示的时候，就会自动调用render方法，渲染组件。extends关键字意味着继承自哪个类，这是ES6的语法，建议在看RN具体代码时，过一遍JS与ES6的语法。

 

我在学习的时候，有一点总是弄不清楚，不知道什么时候要加{}，什么时候不加；也不知道什么时候加()，什么时候不加？

　　1、包装对象的时候使用{}，在JS中，对象就是这么写的 {x: 100, y: 100, method: function() {} } 

　　2、表达式都需要使用{}，在上述的代码中，<View style={}.....    这就是一个赋值表达式，所以需要一个{}，那么为什么{}里面还有{}呢？{flex: 1}这是个对象了，所以需要{}包裹起来

　　3、变量也需要用{}包裹起来，比如上面的<Text style={{flex: 1}}>{str}</Text>中str是个变量，所以包裹起来显示，如果不包裹，那么text就是直接显示str。

　　4、在包裹组件标签的时候，必须使用()，上面return () 里面的代码，就是组件标签。

 

var styles = StyleSheet.create({
    font: {
        fontWeight: 'bold',
        color: 'green',
        fontSize: 14,
    },
});

　　　　上面是样式表、组件外观等配置。也可以直接像html那般，写在组件里面，例如：<View style={{backgroundColor: 'red', flex: 1}}>。

　　　　

AppRegistry.registerComponent('MyApp', ()=> MyApp);

注册程序入口组件，注册哪个组件、程序启动的时候就会自动去加载注册组件。

第一个参数：模块名称,随意填，但是必须与iOS模块名称一致，负责会报找不到组件入口的错误，这里的模块名是'MyApp'

第二个参数：函数,箭头函数ES6的语法，需要返回组件类名。

(箭头函数：=> 左边：函数参数，右边：函数返回值)

 

在学习过程中，没有感觉到RN的布局有什么困难的地方，就不记录了，下次更新prop与state、传值等知识。

 

标签：

相关文章