年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1822|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2017-12-26 11:32:05 | 显示全部楼层 |阅读模式
    本帖最后由 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组件
    [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、上述组件加样式的运行效果图:
    Simulator Screen Shot - iPhone 7 - 2017-12-26 at 11.30.43.png
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 00:56 , Processed in 0.048832 second(s), 21 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表