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.0。ImoocChapterTwo 该单词就是你的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}}>输入4，8计算结果={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}}>输入4，8计算结果={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

进入正题

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

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

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

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

猜你在找的React相关文章