Hello React Native

基本命令

对于安装配置的可以查看React Native中文网。当安装配置后，通过以下命令进行创建工程

#创建一个React-Native工程，也可以通过IDE进行创建
react-native init project_name
#启动React-Native的服务
react-native start
#启动测试
#android版本的，这个需要进行安装JDK，NDK，Gradle（最好安装AndroidStudio这样可以节省很多安装，AndroidStudio集成了Gradle，NDK）
react-native run-ios
#启动ios工程
react-Native run-android

默认工程的学习

进行创建React-Native工程的时候，有一个默认的小页面，这个页面我们可以学习一下，React-Native的基本骨架，代码如下

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

//导入相关的包（库）
import React,{Component} from 'react';
import {
    Platform,StyleSheet,Text,View
} from 'react-native';

//定义一个字符选择器，对于ios和andorid平台显示不一样的字符
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是屏幕上显示的UI-->
            <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>
        );
    }
}

//定义一个Style
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,});

值得注意的是export default class App extends Component<{}> {这个是创建一个类型，这个类是一个组件。其中代码的风格也是比较好理解的。逻辑(组建代码)，布局（render），样式（styles ）；

如何自定义 一个组件

ReactNative的设计是组件化的。一来这种设计方便复用，二来也是面向对象的体现。实现一个组件很简单，只要基础组件。变成注解的属性，逻辑，布局，之后再别的地方使用即可。下面有一个小Demo，实现一个CustomerButton的组件，这里为了方便测试我使用了是react-app不是react-native的代码，思路一样，先创建一个使用命令create-react-app test-react，之后启动npm start,打开http://localhost:3000/ 。

CustomerButton代码

/** * Created by Kyle on 2018/3/9. */

import React,{Component} from "react"

export default class CustomerButton extends Component {

    //属性
    props: {
        text: Object,fillColor: Object,}

    constructor(props) {
        super(props);

        //状态
        this.state = ({
            text: this.props.text,fillColor: this.props.fillColor,});
    }

    render() {
        return (
            <div style={{
                //引用属性
                background: this.props.fillColor,}}>
                {/*引用属性*/}
                {this.props.text}
            </div>
        );
    }
}

//默认属性
CustomerButton.defaultProps = {
    text: "Click Me",fillColor: 'red'
}

使用组件代码

//导入
import CustomerButton from "./CustomerButton";

render(){
   ....
   //引用
  <CustomerButton/>
  ....
}

布局

在布局中，我们在意的界面的元素，属性图的元素是如何定位的。我们知道在所有的布局中我们都是写在一个矩形区域的。子元素在矩形区域的分布就是我们需要知道的。在数学里的xy坐标系中，我们是通过(x,y)来定位的，同理在ReactNative的布局中也是如此。但是，简单的通过xy定位是非常低效率的。所以，在Android中有了五大布局，LinearLayout，RelativeLayout，FrameLayout，TableLayout，AbsoluteLayout。而在ReactNative的布局采用了嵌套字进行布局。View默认的布局是一个竖直的布局，之后通过flexDirection进行改变子元素排列方向，之后通过alignItems进行子的分布方向进行改变，之后通过flex进行设置比重。下面是几个经典的排版demo；

<View> //竖直分布的元素 <View> <Text>hello react native</Text> <Text>very nice!</Text> <Text>I am here.</Text> </View> //横向的分布的元素 <View style={{flexDirection:'row'}}> <Text>hello react native</Text> <Text>very nice!</Text> <Text>I am here.</Text> </View> </View>

总结

发现React的写法相对简单。而且好理解，只有多多找个例子来临摹一下，即可上手了。

原文地址：https://www.jb51.cc/react/301826.html

Hello React Native