第一讲 ReactNative项目结构及StyleSheet的基本使用

Sian

1、ReactNative的安装请参考：ReactNative中文网
2、这里以iOS项目为例进行示例讲解，在项目目录中有两个JS文件分别为：App.js、index.js；
3、这两个文件在以前的版本其实是一个index.ios.js文件，新版本将其拆开可能是为了让开发者能更关注业务本身吧；
4、不管一个文件还是两个文件，整体结构是不变的，大致可分为四个部分：
4.1、第一部分：导入ReactNative包，导入ReactNative组件

[JavaScript] 纯文本查看 复制代码

/**
 * 第一部分：导入ReactNative包，导入ReactNative组件
 */
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

4.2、第二部分：创建ReactNative组件

[JavaScript] 纯文本查看 复制代码

/**
 * 第二部分：创建ReactNative组件
 与React创建组件一样，可使用系统已创建好的内部组件来创建原生视图
 */
export default class App extends Component{
  render(){
    return (
      <View style={style.container}>
        <View style={[style.top, style.border]}></View>
        <View style={[style.bottom, style.border, {borderWidth:5}]}></View>
      </View>
    );
  }
}

4.3、第三部分：StyleSheet.create创建样式实例

[JavaScript] 纯文本查看 复制代码

/**
 * 第三部分：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文件)

[JavaScript] 纯文本查看 复制代码

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、上述组件加样式的运行效果图：