第一讲 ReactNative项目结构及StyleSheet的基本使用
本帖最后由 Sian 于 2017-12-26 11:38 编辑1、ReactNative的安装请参考：ReactNative中文网
2、这里以iOS项目为例进行示例讲解，在项目目录中有两个JS文件分别为：App.js、index.js；
3、这两个文件在以前的版本其实是一个index.ios.js文件，新版本将其拆开可能是为了让开发者能更关注业务本身吧；
4、不管一个文件还是两个文件，整体结构是不变的，大致可分为四个部分：
4.1、第一部分：导入ReactNative包，导入ReactNative组件
/**
* 第一部分：导入ReactNative包，导入ReactNative组件
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
4.2、第二部分：创建ReactNative组件
/**
* 第二部分：创建ReactNative组件
与React创建组件一样，可使用系统已创建好的内部组件来创建原生视图
*/
export default class App extends Component{
render(){
return (
<View style={style.container}>
<View style={}></View>
<View style={}></View>
</View>
);
}
}
4.3、第三部分：StyleSheet.create创建样式实例
/**
* 第三部分：StyleSheet.create创建样式实例
在应用中只会被创建一次，不会在每个渲染周期都重新创建
*/
var style = StyleSheet.create({
container:{
width:300,
height:400,
backgroundColor:"red",
marginTop:20,
marginLeft:30,
},
top:{
margin:10,
backgroundColor:"green",
width:280,
height:250
},
bottom:{
margin:10,
backgroundColor:"yellow",
width:280,
height:110
},
border:{
borderWidth:3,
}
});
4.4、第四部分：注册入口组件(index.js文件)
import { AppRegistry } from 'react-native';
import App from './App';
/**
* 第四部分：注册入口组件
AppRegistry：负责注册运行ReactNative应用程序的JavaScript入口
registerComponent注册应用程序的入口程序，告知ReactNative哪个组件被注册为应用程序的根容器
*/
AppRegistry.registerComponent('Demo', () => App);
5、第一部分和第四部分基本上不需要频繁地修改，主要代码在第二、第三部分；
5.1、第二部分为组件的定义，这里前面React基础部分有详细介绍，只不过不需要自己渲染，ReactNative框架已帮我们实现，我们只要定义好组件即可；
5.2、组件的定义包括布局和样式两个大部分，布局可根据需求充分利用ReactNative提供给我们的各种基础组件来实现，样式则在第三部分中定义，主要是CSS样式的编写；
6、上述组件加样式的运行效果图：
页:
[1]