react-native 入门之 helloworld

简介

在网上找了一篇很不错的例子，推荐给大家边学边做

helloworld

首先，我们先创建一个项目，它的原始代码如下，可以看出来主要分为样式和功能两部分，没什么值得留意的

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      
        
          Welcome to React Native!
        
        
          To get started, edit App.js
        
        
          {instructions}
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

显示效果是这样的

笔记一：
import ... from '...';是 ES6中引入 react包的用法，这一点有别于 ES5， ES5中使用 var ... = require("...");

笔记二：
export default作用是导出一个类给别的模块使用;
引用方法：import HelloWorld from 'HelloWorld';

笔记三：
定义组件类的方法：

        class Hello extends React.Component{
            render(){
                return(
                <内容/>
                );  }
        }

笔记四：
在ES6下，你需要通过bind来绑定this引用，
或者使用箭头函数（它会绑定当前scope的this引用）来调用
例如：onPress={this.handleOptionsButtonClick.bind(this)}
举例一个完整的写法：

        class PauseMenu extends React.Component{
            constructor(props){
                super(props);
                this._onAppPaused = this.onAppPaused.bind(this);
            }
            componentWillMount(){
                AppStateIOS.addEventListener('change', this._onAppPaused);
            }
            componentDidUnmount(){
                AppStateIOS.removeEventListener('change', this._onAppPaused);
            }
            onAppPaused(event){
            }
        }

笔记五：
Hello World!是JSX的写法，即在JavaScript中嵌入xml的写法；

笔记六：component的意思是组件；

笔记七：render方法中返回一些JSX语句用来渲染结构；

稍微修修改改，看看变化

export default class App extends Component<{}> {
    render() {
        return (
            
                {其实我是存在的}
                
                    Hello World!
                
                
                    To get started, edit App.js
                
                
                    {instructions}
                
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,     //全屏设置
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#E5A3C8',
        // 改变主轴的方向横向 ---> 默认是竖向
        // flexDirection: 'row'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color:'#155895',
        backgroundColor: '#65FCFF',
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

helloworld没什么好说的，麻烦的地方主要在于搭建开发环境，折腾了好久
上面的代码定义了一个名为HelloWorldApp的新的组件（Component）。你在编写React Native应用时，肯定会写出很多新的组件。而一个App的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。