react-native 再偿之

最新推荐文章于 2024-10-10 09:36:18 发布
最新推荐文章于 2024-10-10 09:36:18 发布
阅读量557 收藏
点赞数
分类专栏： react-native 文章标签： ReactNative
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/junhuahouse/article/details/80412223
版权

这里写图片描述
该博文内容基于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, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    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,\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/>
                <Text style={{fontSize: 30}}>姓名：{name}</Text>
                <Text style={{fontSize: 30}}>芳龄：{age}</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,
    },
});

其中有一行代码是这样写的import EIComponent, {name, 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, {Component} from 'react';
import {
    Text,
    View
} from 'react-native';

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

export {name, 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,}
    }

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

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

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

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

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/>
                <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,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

如何使用？？，在 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, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';
import HelloWordComponent from './HelloWordComponent'
import EIComponent, {name, age, sum} from './EIComponent'
import LifeCycleComponent from './LifeCycleComponent'

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/>
                <Text style={{fontSize: 30}}>姓名：{name}</Text>
                <Text style={{fontSize: 30}}>芳龄：{age}</Text>
                <Text style={{fontSize: 30}}>输入4，8计算结果={sum(4, 8)}</Text>
                <LifeCycleComponent/>
            </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,
    },
});

这里先中断一下，叙述一下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, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';
import HelloWordComponent from './HelloWordComponent'
import LifeCycleComponent from './LifeCycleComponent'
import EIComponent, {name, age, sum} from './EIComponent'

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> {
    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,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

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

    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>
            </View>
        );
    }
}

通过点击拔出组件操作，观察生命周期
这里写图片描述
可以看到周期方法执行顺序（红色框区域）
这里写图片描述

通过点击插入组件 操作，观察生命周期
这里写图片描述
可以看到周期方法执行顺序（红色框区域）
这里写图片描述
源码资源下载

学术袁
关注
专栏目录
react native
01-26
react native环境配置的步骤以及一些必备的插件，里面包含的插件都是网上不好找的，比较好找的比如python（去官网下载即可）为了节省空间删除了，带来的不便请原谅
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
react-native-rename 只需一个命令即可重命名react-native应用 该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 ...
React Native——Component（组件）
weixin_34174132的博客
07-03 216
React利用JSX语法将html标签封装成组件的形式，来插入到DOM中，可以很方便的构建出网页UI。在React Native中，组件仍是其最核心的东西，各个界面UI都是通过基础组件的拼装来实现的。 JSX React 的核心机制就是创建虚拟DOM，在虚拟DOM与实际DOM之间通过强大的Diff算法来减少对实际DOM的渲染操作以提升性能。虚拟DOM可以用原生的JS来创建，但是这样的方式让代码的可...
深入探究React Native：从基础到实战
weixin_30248619的博客
10-10 1217
本文还有配套的精品资源，点击获取 简介：React Native是一个由Facebook推出的开源框架，用于构建跨平台的原生移动应用程序。本项目《MeizhiReactNative——初探React Native世界》将带领初学者入门React Native，涵盖框架基础、项目结构、环境搭建、基本组件使用、样式系统、网络请求与数据管理、生命周期方法以及调试工具。通过实例操作...
React-native是什么？
mapbar_front的博客
08-18 3685
开发React-native，需要的技术栈，真的不少。你需要了解，react-native是什么？react-native开发所需的基础技术是什么？react-native是什么？我们知道，传统的开发分为前端开发（web开发），ios开发以及android开发。不同的开发你需要懂得不同的相关技术，如：开发android你就要懂java语言，开发ios你需要懂object-c，开发web网页你需要懂J
React-Native学习
鹿的迷雾林的博客
03-27 857
中文文档：https://reactnative.cn/docs/getting-started.html 为方便快速查找，此处仅做步骤记录 0.环境配置参照上面文档内容 1.构建、启动项目 注意：项目目录不能有中文字符 react-native init AwesomeProject cd AwesomeProject react-native run-android 2. ...
React-native基础介绍
mapbar_front的博客
08-18 1846
JSX语法如果仅仅是开发react/react-native，个人觉得，没必要专门学习什么是jsx，我们只需要它的一些基本的知识就足够了。jsx语法，一定要记住这样的一句话，它是把HTML模板和JavaScript进行混写的一种语法风格。使用<>来写HTML，使用{}来写JavaScript。jsx的基本语法规则就是：遇到HTML标签（以 < 开头），就用HTML规则解析，遇到代码块（以 { 开头）
react-native-iap：应用内购买的react-native本机模块
02-03
最近， react-native-iap模块维护得不好。 我们正在考虑再次参与并使模块更健康。 请参考并与我们分享您或您的组织如何使用它。 新年快乐 :party_popper: 介绍 此本地React模块将帮助您在Android ， iOS平台和Amazon...
react-native-aliplayer:react-native-alilayer
08-05
react-native-aliplayer 阿里云点播播放器 RN 封装,支持多种播放格式,支持 android 和 ios Getting started $ npm install react-native-aliplayer --save Mostly automatic installation $ react-native link react...
react-native-gl-image-filters:使用gl-react的React-Native图像滤镜
05-01
react-native-gl-image-filters 在描述性VDOM范例中，React Native的OpenGL绑定可在图像和组件上实现复杂的效果。 您可以使用预定义的过滤器： 模糊 对比 饱和 亮度 色调 消极的 棕褐色 锐化 温度 接触。 gl-...
react-native-web-linear-gradient:用于Web实现React-native-linear-gradient的React Native
05-17
react-native-web-linear-gradient 用于Web实现React-native-linear-gradient的React Native 入门 $ npm install react-native-web-linear-gradient --save 别名打包您的webpack配置中： resolve: { alias: { ...
react-native
好气嗷，但仍要保持微笑!
09-12 208
import React,{Component} from 'react' import {StyleSheet,Text,View,TouchableOpacity,TextInput} from 'react-native' export default class LessonInput extends Component{ //构造器 constructor(){ ...
ReactNative
青岑的博客
09-25 604
接触ReactNative也已经一段时间了，把自己遇到的一些问题总结出来希望能帮助到正在踩坑的人。ListViewListView是RN中的使用频率非常高的组件，问题却也层出不穷,FlatList等列表组件类似。 首先是row中的视图不能随着state或Mobx而实时更新，如果把样式绑定到state中使用this.setState()方法更改数据后会发现，更改数据后视图无法更改，只有新渲染的row才
［ReactNative入门到精通］React Native概述
热门推荐
北漂周的专栏（微信：stchou_zst）
10-11 1万+
2015年9月15日，Facebook发布了 React Native for Android，把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台。什么是React NativeReact Native 让开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 Web，iOS 和 Android 平台的原生应用。React
React Native
landehuxi的专栏
09-09 427
React Native的核心实现： 先简单说几点，详细的等回头更新。 1. React Native里面没有webview，这货不是Hybrid app，里面执行JS是用的 JavascriptCore。 2. 再说React Native的核心，iOS Native code提供了十来个最基本核心的类（RCTDeviceEventEmitter、RCTRenderingPerf
react-native link react-native-svg
最新发布
10-12
React Native Link React-Native-SVG 是一个用于将 SVG 图形库集成到 React Native 应用程序中的工具。它允许你在原生应用中直接使用 SVG 文件，而不需要将其转换为其他格式如 PNG 或 JPEG。通过`react-native-link`命令，你可以方便地链接这个库，并在项目中导入 SVG 资源。 首先，你需要安装 `react-native-svg` 和 `rnpm` 或 `yarn` 或 `npm`。然后，在终端或命令行中运行以下步骤： 1. **安装依赖**: ``` npm install react-native-svg ``` 或者使用 yarn: ``` yarn add react-native-svg ``` 2. **Linking the library** (如果使用rnpm): ```sh react-native link react-native-svg ``` 如果使用`yarn`或`npm`，则需要手动创建 symlinks 或配置 your app's `android/app/src/main/java/com/yourapp` 和 `ios/RNFirebase.xcconfig` 的路径。 3. **更新 AndroidManifest.xml**: 确保添加了 `<uses-permission android:name="android.permission.INTERNET" />` 权限，因为SVG加载可能需要网络访问。 4. **在你的组件中使用 SVG**: ```jsx import { SvgUri } from 'react-native-svg'; <SvgUri source={{ uri: 'path_to_your_svg_file.svg' }} /> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值