React Native 看起来很像 React,但React Native的基础组件是原生组件 不是web组件。
理解React Native应用的基本结构,需要先了解一下基本的React概念——JSX
语法、组件
、state
状态、props
属性,还要掌握一些React Native特有的知识——原生组件的使用
等。
在我们初始化后的项目中,使用如下代码替换掉App.js中的代码
import React, {Component} from 'react';
import {Text, View} from 'react-native';
export default class HelloWorldApp extends Component {
render(){
return (
<View style={{flex:1, justifyContent:"center", alignItems:"center"}}>
<Text>Hello, world!</Text>
</View>
);
}
}
- React Native完全支持了ES2015(即ES6)的语法,无需担心兼容性问题;
- 与传统的应用框架不同(设计自由的模板语法,在结构标记中嵌入代码),React设计的JSX是在代码中嵌入结构标记。