Hello React Native

前端之家收集整理的这篇文章主要介绍了Hello React Native前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

Created with Raphaël 2.1.2 样式 样式 布局 布局 逻辑 逻辑 布局的css 布局文件触发各种操作,onClick() 改变布局(通过state,触发render函数,这里先忽略state)

如何自定义一个组件

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.f2er.com/react/301826.html

猜你在找的React相关文章