react-native 再偿之

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


该博文内容基于Windows系统,针对Android系统下的APP:
介绍下使用webStorm创建ReactNative项目,当然首先你要配置好环境,环境是否正确很重要,关系到你是否有兴趣继续玩下去,提醒下根据ReactNative官网配置哦了,然后下载WebStorm开发工具安装运行。
创建新项目,注意是React Native 那一栏,不要选择叉了!创建成功之后,和在cmd-dos页面一样,是在WebStorm的终端(Terminal)执行命令:"react-native run-android",如果没有安装对应的gradle,则WebStorm自动去下载,之后会成功将app安装到您手机上。
当然,你也可以通过使用CLI命令进行创建新的项目。比如:react-native init ImoocChapterTwo --version 0.41.0 通过这种方式,是按照你自己设定的react-native版本进行创建项目的。

有一点需要注意,这是我实践的结果:比如对于你所使用的命令react-native init ImoocChapterTwo --version 0.41.0ImoocChapterTwo 该单词就是你的app的名字,也是决定了你项目包名的,比如这样操作就会生成包名为com.imoocchaptertwo 项目工程 ,并且ImoocChapterTwo这个名字不能含数字(如:ImoocChapter2),不然在dos页面使用CLI无法生成project

进入正题

项目结构图

如何导出和导入使用一个ReactNative组件?


新建一个组件 HelloWordComponent.js

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

export default class HelloWordComponent extends Component<Props> {
    render() {
        return (
            <Text style={{fontSize: 40,backgroundColor: 'red'}}>
                 哈喽 帅哥 !
            </Text>
        );
    }
}

对于组件来说,导出的规则就是:Class代码中以两个单词export default 作为前缀来实现的。
然后我们切换到App.js代码页面看到

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

import React,{Component} from 'react';
import {
    Platform,StyleSheet,View
} from 'react-native';
import HelloWordComponent from './HelloWordComponent'

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

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <HelloWordComponent/>
            </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,});

其中有一行代码是这样写的import HelloWordComponent from './HelloWordComponent'
表示组件导入(可在此app.js中引用)的方式。
如何使用??,在render()方法中实现使用!

export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <HelloWordComponent/>
            </View>
        );
    }
}

如何导出和导入使用一个变量或者常量?


新建一个组件EIComponent.js

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

var name = '小明';
var age = '20';

export {name,age};

export default class EIComponent extends Component<Props> {
    constructor(props) {
        super(props);

        this.state = {count: 0,}
    }

    render() {
        return (
            <View>
                <Text style={{fontSize: 40,backgroundColor: 'red'}}
                      onPress={() => {
                          this.setState({
                              count: this.state.count + 1,})
                      }}>

                    点击我累计吻{this.props.name}次
                </Text>

                <Text style={{fontSize: 50}}>一共吻了{this.state.count}次</Text>
            </View>
        );
    }
}

代码中可以很容易的发现

var name = '小明';
var age = '20';

export {name,age};

就是变量的定义和导出的方式!怎么引用呢?还是在app.js中

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

import React,Text,View
} from 'react-native';
import HelloWordComponent from './HelloWordComponent'
import EIComponent,{name,age} from './EIComponent'

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,});

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <HelloWordComponent/>
                <Text style={{fontSize: 30}}>姓名:{name}</Text>
                <Text style={{fontSize: 30}}>芳龄:{age}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,});

其中有一行代码是这样写的import EIComponent,age} from './EIComponent'
表示变量导入(可在此app.js中引用)的方式。
如何使用??,在 render() 方法中实现使用!

export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <HelloWordComponent/>
                <Text style={{fontSize: 30}}>姓名:{name}</Text>
                <Text style={{fontSize: 30}}>芳龄:{age}</Text>
            </View>
        );
    }
}

如何导出和导入使用一个方法


方法导出和导出变量一样简单,直接在加入代码

export function sum(a = 3,b = 6) {
    return a + b;
}

import React,age};

export function sum(a = 3,b = 6) {
    return a + b;
}

export default class EIComponent extends Component<Props> {
    constructor(props) {
        super(props);

        this.state = {count: 0,})
                      }}>

                    点击我累计吻{this.props.name}次
                </Text>

                <Text style={{fontSize: 50}}>一共吻了{this.state.count}次</Text>
            </View>
        );
    }
}

表示方法导入(可在此app.js中引用)的方式和变量的导入方式一样简单,
import EIComponent,age,sum} from './EIComponent',只在{}添加sum方法名就能实现!

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

import React,sum} from './EIComponent'

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,});

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <HelloWordComponent/>
                <Text style={{fontSize: 30}}>姓名:{name}</Text>
                <Text style={{fontSize: 30}}>芳龄:{age}</Text>
                <Text style={{fontSize: 30}}>输入48计算结果={sum(4,8)}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,});

如何使用??,在 render() 方法中实现使用!

export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <HelloWordComponent/> <Text style={{fontSize: 30}}>姓名:{name}</Text> <Text style={{fontSize: 30}}>芳龄:{age}</Text> <Text style={{fontSize: 30}}>输入4,8计算结果={sum(4,8)}</Text> </View> ); } }

ReactNative组件有生命周期吗?怎么调用的呢?


ReactNative组件是有自己的生命周期的,而且和我们的Android的四大组件之一的Activity是不是有些类似呢?!她的生命周期主要分三大块:装载、渲染和卸载,然后围绕这三大块进行生命周期的细分。

然后我呢,就新建一个组件LifeCycleComponent.js来打印下她的生命周期到底是怎么运作的!

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


export default class LifeCycleComponent extends Component<Props> {
    constructor(props) {
        super(props);
        console.log('<<<<<<<<<-----constructor---->>>>>>>>>>>')

        this.state = {count: 0,}
    }

    componentWillMount() {
        console.log('<<<<<<<<<-----componentWillMount---->>>>>>>>>>>')
    }

    componentDidMount() {
        console.log('<<<<<<<<<-----componentDidMount---->>>>>>>>>>>')
    }

    componentWillReceiveProps(nextProps) {
        console.log('<<<<<<<<<-----componentWillReceiveProps---->>>>>>>>>>>')
    }

    shouldComponentUpdate(nextProps,nextState) {
        console.log('<<<<<<<<<-----shouldComponentUpdate---->>>>>>>>>>>')
        return true;
    }

    componentWillUpdate(nextProps,nextState) {
        console.log('<<<<<<<<<-----componentWillUpdate---->>>>>>>>>>>')
    }

    componentDidUpdate(preProps,preState) {
        console.log('<<<<<<<<<-----componentDidUpdate---->>>>>>>>>>>')
    }

    componentWillUnmount() {
        console.log('<<<<<<<<<-----componentWillUnmount---->>>>>>>>>>>')
    }

    render() {
        console.log('<<<<<<<<<-----render---->>>>>>>>>>>')
        return (
            <View>
                <Text style={{fontSize: 40,backgroundColor: 'blue'}}>这里在进行很严肃的ReactNative组件的生命周期测试</Text><Text style={{fontSize: 40,backgroundColor: 'blue'}}
                      onPress={() => {
                          this.setState({
                              count: this.state.count + 1,})
                      }}
                    >这里在进行很严肃的ReactNative组件的生命周期测试</Text>
            </View>
        );
    }
}

然后导入到app.js中并使用

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

import React,sum} from './EIComponent'
import LifeCycleComponent from './LifeCycleComponent'

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,8)}</Text>
                <LifeCycleComponent/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,});

这里先中断一下,叙述一下ReactNative远程调试,看下图

摇晃手机弹出对话框,红色框这个说明我已经开启了远程调试功能。如果么有开启,则点击开启就行,然后会在你的浏览器中打开一个页面,如下

根据上面提示操作组合键:按下Ctrl+Shift+J三键,正确打开Debug页面进行调试!
然后Reload查看控制台生命周期进行的log打印

然后继续操作,点击蓝色区域触发监听。继续执行生命周期方法(红色框区域)

然后再次继续操作,点击手机的返回键退出该app。继续执行生命周期方法(红色框区域)

未点击手机的返回键退出app情况下,如果我们继续操作,对LifeCycleComponent组件的使用进行控制。
代码上稍作修改
app.js

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

import React,View
} from 'react-native';
import HelloWordComponent from './HelloWordComponent'
import LifeCycleComponent from './LifeCycleComponent'
import EIComponent,});

type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = ({remove: false})
    }

    render() {
        var viewComponent = this.state.remove ? null : <LifeCycleComponent/>;
        var text = this.state.remove ? '插入组件' : '拔出组件';
        return (
            <View style={styles.container}>
                <HelloWordComponent/>
                <Text style={{fontSize: 30}}>姓名:{name}</Text>
                <Text style={{fontSize: 30}}>芳龄:{age}</Text>
                <Text style={{fontSize: 30}}>输入48计算结果={sum(4,8)}</Text>
                <Text style={{fontSize: 40}} onPress={() => {
                    this.setState({remove: !this.state.remove})
                }}>{text}</Text>
                {viewComponent}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,});

LifeCycleComponent.js

import React,View
} from 'react-native';


export default class LifeCycleComponent extends Component<Props> {
    constructor(props) {
        super(props);
        console.log('<<<<<<<<<-----constructor---->>>>>>>>>>>')
    }

    componentWillMount() {
        console.log('<<<<<<<<<-----componentWillMount---->>>>>>>>>>>')
    }

    componentDidMount() {
        console.log('<<<<<<<<<-----componentDidMount---->>>>>>>>>>>')
    }

    componentWillReceiveProps(nextProps) {
        console.log('<<<<<<<<<-----componentWillReceiveProps---->>>>>>>>>>>')
    }

    shouldComponentUpdate(nextProps,backgroundColor: 'blue'}}
                >这里在进行很严肃的ReactNative组件的生命周期测试</Text>
            </View>
        );
    }
}

通过点击拔出组件操作,观察生命周期

可以看到周期方法执行顺序(红色框区域)

通过点击插入组件 操作,观察生命周期

可以看到周期方法执行顺序(红色框区域)

源码资源下载

原文链接:https://www.f2er.com/react/301517.html

猜你在找的React相关文章