react-native 入门之 hello world

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

作者:邪人君子

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

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 (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

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,
  },
});

显示效果是这样的

图1:react-native 入门之 hello world

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

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

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

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

笔记四:
ES6下,你需要通过bind来绑定this引用,
或者使用箭头函数(它会绑定当前scopethis引用)来调用
例如: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){
            }
        }

笔记五:
<Text>Hello World!</Text>JSX的写法,即在JavaScript中嵌入xml的写法;

笔记六:component的意思是组件;

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

稍微修修改改,看看变化

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

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,
    },
});

图2:react-native 入门之 hello world

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

阅读余下内容

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号