ReactNative从零到完整项目-创建HelloWorld

项目连接： 93Laer/MyDemo

前言：
webstorm开发RN的时候默认是不支持代码自动化提示的，所以下面给出解决连接，我这里就不多说了
windows下webstorm开发react-native智能提示
webstorm开发RN语法支持：settings->Languages&Frameworks->Javascript:

语法支持

首先介绍下之前我们创建的工程下面主要的几个模块的作用

文件结构

android：从名字就可以看出这里是我们原生安卓的一些东西
ios:同理这里是一些ios原生的东西
node_modules:这里类似与安卓依赖库后的缓存代码集，这里存放我们的一些module
App.js:暂时可以理解为我们用来写js，画界面的地方
index.js:入口文件，类似于安卓的application

大概解释下index.js的代码

import { AppRegistry } from 'react-native';
import App from './App';
 //这里的`MyDemo`必须和工程名字保持一致
AppRegistry.registerComponent('MyDemo', () => App);

• APPRegistry不用说了，类似于application，是用来告知React Native哪一个组件被注册为整个应用的根容器。
• 第二句话就是导入我们的js模块，我们的HelloWorld将在这里诞生
• 第三句就是注册了，第一个参数使我们项目名称，第二个意思就是注册APP这个组件

万年不变的HelloWorld

• 首先根据文档点击官方文档连接,跟着官方文档来
  根据官网文档提示，我们可以将App.js里原有的内容删掉，创建我们自己的
  • 第一步导入React下的Component组件

    //引入 React的抽象组件
    import React, { Component } from 'react';
    

  • 第二步我们导入Text，我们要写文本的HelloWorld嘛,而我想再为文字设置一些样式，所以导入了StyleSheet

    //引入 ReactNative的具体组件
    import { Text,StyleSheet } from 'react-native';
    

  • 第三步定义组件,定义HelloWorldAPP继承Component，并重写render（）函数

     export default class HelloWorldApp extends Component {
        render() {
            return (
              //这里就是返回我们的HelloWorld文本
              return(
              <Text>Hello world!</Text>
            );
        }
    }
    

export default关键字：注意组件声明前面的export default关键字。它的意思是导出(export)当前组件，以允许其他组件引入(import)和使用当前组件

• 接下来给HelloWorld添加点样式,定义样式

  const  styles=StyleSheet.create({
      helloWorld:{
          color:'red',//颜色红色
          fontSize:34,//
          fontWeight:'bold'//粗体
      }
  })
  

• 使用样式
  <Text style={styles.helloWorld}>Hello world!</Text>
  或是不适用StyleSheet，直接对文本的属性赋值，如：
  <Text style={{color: 'red',fontSize:34,fontWeight:'bold'}}>Hello world!</Text>
  这里可以理解为对style赋值一个匿名内部内，这个内部内其实就是{color: 'red',fontSize:34,fontWeight:'bold'} 这个对象

完整代码

/**
 * 创建人：赖天兵
 * 时间： 2018/2/24
 * 简书：https://www.jianshu.com/u/2229fd214880
 * 掘金：https://juejin.im/user/58647e21128fe1006d0f3f3e
 * github：https://github.com/93Laer
 * 描述：
 */
import React, { Component } from 'react';
import {
    Text
    ,StyleSheet
    } from 'react-native';

export default class HelloWorldApp extends Component {
  render(){
      return(
          //<Text style={styles.helloWorld}>Hello world!</Text>
          <Text style={{color: 'red',fontSize:34,fontWeight:'bold'}}>Hello world!</Text>
      );
  }
}
const  styles=StyleSheet.create({
    helloWorld:{
        color:'red',//颜色红色
        fontSize:34,//
        fontWeight:'bold'//粗体
    }
})