这篇文章简单介绍一下React Native的基础语法！
如果接触过WEB开发的话，看到下面的代码应该很快就知道是怎么回事！
语法的简单介绍
导入一下系统文件、UI控件、布局样式等
import React, { Component, } from 'react';
import {
AppRegistry,
Image,
ListView,
StyleSheet,
Text,
View,
} from 'react-native';
看到import应该大概知道是导入一下API，其实并不全对；Component是一个自定义的类，用来实现UI布局；第二import是UI布局时使用的一些控件还有布局样式；
定义变量
var MOCKED_MOVIES_DATA = [
{title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
定义一个字典数组；
设置UI控件
class HelloWorld extends Component {
render() {
var movie = MOCKED_MOVIES_DATA[0];
return (
<View style={styles.container}>
<Text>{movie.title}</Text>
<Text>{movie.year}</Text>
<Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} />
</View>
);
}
}
HelloWorld是你的项目名称，如果你改成别的自定义的名字，程序就会报错；
render()函数/方法名 ,设置UI控件必须写在return里面；定义一些变量、调用方法之类的不能写在return里面，否则报错！
render() {
return (
);
}
设置布局
布局的语法和JavaScript一样
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail: {
width: 53,
height: 81,
},
});
UI控件引用：style={styles.thumbnail}
程序结束
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
HelloWorld为项目名
项目是官方的一个示例
项目的UI层次结构(展示另一个官方案例分析)
项目运行效果图
里面有view 、scrollview 、imageview；并没有webview；都是封装好的原生控件；
'本文所写为个人所理解，欢迎纠错！'
