这篇文章简单介绍一下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；都是封装好的原生控件；

'本文所写为个人所理解，欢迎纠错！'