![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react native
文章平均质量分 85
神奇大叔
这个作者很懒,什么都没留下…
展开
-
rn 拍摄/预览视频react-native-image-picker和react-native-video
1、配置react-native-image-picker const options = { title: '上传视频', cancelButtonTitle:'取消', takePhotoButtonTitle:'拍摄', videoQuality:'low', 设置视频质量 mediaType:'video', 设置媒体格式 chooseFromLibraryButtonTitl原创 2020-09-06 16:01:22 · 2919 阅读 · 0 评论 -
rn &&操作符实现三元效果
{ this.state.show&&<Text>ww</Text>}当第一个为true时,将返回第二个当第一个为false时,整体为false原创 2020-09-05 16:10:52 · 365 阅读 · 0 评论 -
rn 视频播放组件react-native-video
1、安装 yarn add react-native-video2、导入 import Video from 'react-native-video';3、使用 <Video ref='video' source={{uri:'https://video.699pic.com/videos/73/92/43/b_mPEcRsUxTkE91597739243.mp4'}} //url或本地文件 volume={5} //放大声音原创 2020-09-04 22:14:42 · 3034 阅读 · 0 评论 -
rn 本地服务器报错[TypeError: Network request failed]
访问本地服务器,要将地址改成:http://10.0.2.2:3000原创 2020-09-04 18:01:22 · 2106 阅读 · 0 评论 -
rn 使用fetch报错[ReferenceError: Can‘t find variable: location]
引入了mockjs原创 2020-09-04 15:20:03 · 1188 阅读 · 0 评论 -
rn 安卓端支持gif和webp格式图片
1、在android/app/build.gradle的dependencies中添加 // 如果你需要支持GIF动图 implementation 'com.facebook.fresco:animated-gif:2.0.0' // 如果你需要支持WebP格式,包括WebP动图 implementation 'com.facebook.fresco:animated-webp:2.1.0' implementation 'com.facebook.fresco原创 2020-09-02 15:37:08 · 786 阅读 · 0 评论 -
rn 手动隐藏键盘、点击空白处隐藏键盘
1、导入 import {Keyboard} from 'react-native';2、手动隐藏键盘 在事件中设置:Keyboard.dismiss();3、点击空白处隐藏键盘 方式一: 使用ScrollView作为父及以上容器 方式二: 使用TouchableWithoutFeedback组件,该按钮组件无任何视觉反馈效果 使用TouchableWithoutFeedback在外层包裹,onPress事件中设置Keyboard.dismiss(); 子元素要占据全屏原创 2020-09-02 09:15:01 · 2582 阅读 · 0 评论 -
rn 移动端数据库Realm
1、安装 yarn add realm2、使用 (1)导入 import Realm from 'realm'; (2)创建数据库表 const xx={ name:'表名', primaryKey:'主键名', 在插入时,需要手动设置主键内容(主键不能相同) properties:{ 表中的字段名,包括主键 id: {type: 'int', default: 默认值, optional: 布尔值,true表示可以为空},原创 2020-09-01 10:53:43 · 853 阅读 · 0 评论 -
rn 嵌套网页webView
需要先导入1、使用 <WebView source={{uri: '网页地址'}} style={{marginTop: 20}} /> <WebView originWhitelist={['*']} 加载html代码必须设置该属性 source={{ html: '<h1>Hello world</h1>' }} />2、参数 source meth原创 2020-09-01 09:28:37 · 1859 阅读 · 0 评论 -
rn 模态框Modal(配置内部视图出现/消失时的动画)
模态框占据全屏出现后即会占据全屏,意味着要在模态框的视图内提供关闭模态框的事件 1、导入 import {Modal} from 'react-native'2、使用 <Modal visible={布尔值} 控制视图的显示和隐藏 onRequestClose={()=>{}} android必填,会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。请务必注意本属性在 Android 平台上为必填,且会在 moda原创 2020-08-31 21:52:03 · 1613 阅读 · 0 评论 -
rn 手动实现启动页
在栈导航中,将初始化路由设置为启动页组件,然后在启动页组件中通过定时器跳转到其他组件原创 2020-08-31 20:35:40 · 245 阅读 · 1 评论 -
rn 订阅发布,多级组件传参
1、订阅消息 this.state.subscribe=DeviceEventEmitter.addListener('xx',(data)=>{ ... }) 2、在组件卸载时取消订阅 componentWillMount() { this.state.subscribe.remove(); } 3、发布消息 DeviceEventEmitter.emit('xx',内容);代码示例:订阅:imp原创 2020-08-31 17:46:27 · 233 阅读 · 0 评论 -
rn 设备信息
使用前都需要导入1、获取屏幕高宽 Dimensions.get('window').width Dimensions.get('window').height 2、获取系统类型 Platform.OS 'ios'/'android'原创 2020-08-31 15:08:36 · 332 阅读 · 0 评论 -
rn 底部导航栏react-native-tab-navigator
1、安装 yarn add react-native-tab-navigato2、使用 (1)import TabNavigator from 'react-native-tab-navigator'; (2)定义state state={ selectedTab:'' } <TabNavigator sceneStyle={{...}} tabBarStyle tabBarShadowStyle > <TabNavigator.Ite原创 2020-08-31 14:50:34 · 449 阅读 · 0 评论 -
rn 图片拍照、上传react-native-image-picker
多图像选择,对裁剪工具的更多控制,以及对横屏的支持等使用react-native-image-crop-picker1、安装 yarn add react-native-image-picker2、配置权限 (1)在android/app/src/main/AndroidManifest.xml中添加 <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android原创 2020-08-30 16:53:05 · 3756 阅读 · 0 评论 -
ReactNative 上拉加载和下拉刷新模板
import React,{Component} from 'react'import { View, Text, Image, StyleSheet, FlatList, ActivityIndicator} from 'react-native'class Movie extends Component{ state={ arr:[ 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoW原创 2020-08-30 15:44:27 · 420 阅读 · 0 评论 -
rn 报错:Error: Requiring unknown module “904“. If you are sure the module exists, tr
重启服务原创 2020-08-30 10:56:11 · 1397 阅读 · 0 评论 -
rn 配置全局变量
1、创建js文件 global.xx=x; 注册全局变量2、在入口文件App.js中导入全局变量js文件,全局使用 import 'xxx/xxxx.js'3、使用 xx原创 2020-08-25 17:04:45 · 1008 阅读 · 0 评论 -
rn 集成redux
1、创建redux 创建过程和react相同 2、将store挂载到App组件上 在index.js中创建一个新的类组件,该类组件中使用Provider包含App组件,并挂载store,然后挂载该类组件代码示例:index.js:import React, { Component } from 'react'import {AppRegistry} from 'react-native';import App from './App';import {name as appName}原创 2020-08-25 16:36:39 · 527 阅读 · 0 评论 -
rn ios安全可视区域内渲染内容(iphoneX等设备)
1、引入 import { StyleSheet, Text, SafeAreaView } from 'react-native'; 2、使用 设置 SafeAreaView 的样式,flex:1即可 <SafeAreaView style={styles.container}> <Text>Page content</Text> </SafeAreaView>代码示例:import React from 'reac原创 2020-08-25 10:43:58 · 546 阅读 · 0 评论 -
rn 分组列表组件SectionList
1、导入 import {SectionList} from 'react-native'2、使用 <SectionList sections={数组类型数据源} keyExtractor={(item, index) => item + index} key值 renderItem={函数,根据数据源渲染内容并返回组件} renderSectionHeader={(item) => ( <Te原创 2020-08-25 10:37:50 · 1515 阅读 · 0 评论 -
rn 侧滑栏组件
(1)安装 yarn add @react-navigation/native yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view yarn add @react-navigation/drawer (2)导入 import 'react-native原创 2020-08-24 20:52:01 · 644 阅读 · 0 评论 -
rn 多种导航栏搭配使用
因为一个组件中只能设置一个导航栏(1)在App.js中设置Stack栈导航栏,设置所有通过this.props.navigate导航的路由和默认路由(2)在栈导航的路由中,设置底部导航栏/顶部导航栏,然后再配置相应路由原创 2020-08-24 16:42:35 · 404 阅读 · 0 评论 -
rn 顶部导航栏
(1)安装 yarn add @react-navigation/native yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view yarn add @react-navigation/material-top-tabs react-native-tab-v原创 2020-08-24 15:38:53 · 1168 阅读 · 0 评论 -
rn 报错error Failed to run jetifier. Run CLI with --verbose flag for more details.
解决方案:关掉项目,重新运行,react-native run-android --no-jetifier原创 2020-08-24 11:18:46 · 4186 阅读 · 0 评论 -
rn 底部导航栏
(1)安装 yarn add @react-navigation/native yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view yarn add @react-navigation/bottom-tabs (2)导入 import 'react-n原创 2020-08-24 10:59:15 · 937 阅读 · 1 评论 -
rn 去除模拟机警告提醒
原创 2020-08-23 22:26:30 · 208 阅读 · 0 评论 -
rn 启动页react-native-splash-screen配置
Android版:1、安装 yarn add react-native-splash-screen 2、导入 import SplashScreen from 'react-native-splash-screen' 3、设置组件挂载后消失 componentDidMount(){ SplashScreen.hide(); } 4、android/...原创 2020-03-31 22:29:32 · 1484 阅读 · 0 评论 -
rn 第三方存储库react-native-storage整合异步存储组件Storage
1、安装 yarn add react-native-storage yarn add @react-native-community/async-storage 2、导入 import Storage from 'react-native-storage'; import AsyncStorage from '@react-native-community/async-storage...原创 2020-03-31 17:37:22 · 593 阅读 · 0 评论 -
rn 动画组件
1、设置动画属性对象 可以通过this设置全局对象 this.xx=new Animated.Value(值);2、将动画属性对象绑定到要动画的组件style上,当属性来使用 如style={{width:this.xx}}3、设置动画 Animated.timing(要改变的动画属性对象,{ toValue:改变动画属性的最终值 duration:持续时间...原创 2020-03-26 10:39:29 · 866 阅读 · 0 评论 -
rn 样式
组件:如<View style={{对象样式键值对}}></View>react-native样式与原生区别:(1)子元素不能继承父元素样式,如父元素设置字体颜色,子元素不设置,子元素字体颜色无效(2)1、通过StyleSheet创建样式 import {StyleSheet} from 'react-native' const xx=StyleSheet...原创 2020-03-24 17:15:32 · 503 阅读 · 0 评论 -
rn 基础设置解析
1、引入react import React from 'react'2、导入组件,只能使用导入的组件替代html标签,不能使用其他如div等标签 import { //样式组件,通过它来create样式 StyleSheet, //视图组件,类似div View, //文本组件,放置文本内容 Text }3、定义函数式组件const App=()=>...原创 2020-03-24 16:01:56 · 406 阅读 · 0 评论 -
rn 环境搭建
(1)切换下载源为淘宝 npx nrm use taobao 若要切换回官方npm npx nrm use npm (2)下载yarn能够加速node模块的下载 npm install yarn yarn使用 yarn add 库名 代替 npm install 库名创建项目 npx react-native init xx ...原创 2020-03-24 09:41:44 · 316 阅读 · 0 评论