weixin_43294560的博客

1、配置react-native-image-picker const options = { title: '上传视频', cancelButtonTitle:'取消', takePhotoButtonTitle:'拍摄', videoQuality:'low', 设置视频质量 mediaType:'video', 设置媒体格式 chooseFromLibraryButtonTitl

{ this.state.show&&<Text>ww</Text>}当第一个为true时,将返回第二个当第一个为false时,整体为false

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} //放大声音

访问本地服务器,要将地址改成:http://10.0.2.2:3000

引入了mockjs

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

1、导入 import {Keyboard} from 'react-native';2、手动隐藏键盘 在事件中设置:Keyboard.dismiss();3、点击空白处隐藏键盘 方式一: 使用ScrollView作为父及以上容器 方式二: 使用TouchableWithoutFeedback组件,该按钮组件无任何视觉反馈效果 使用TouchableWithoutFeedback在外层包裹,onPress事件中设置Keyboard.dismiss(); 子元素要占据全屏

1、安装 yarn add realm2、使用 (1)导入 import Realm from 'realm'; (2)创建数据库表 const xx={ name:'表名', primaryKey:'主键名', 在插入时,需要手动设置主键内容(主键不能相同) properties:{ 表中的字段名,包括主键 id: {type: 'int', default: 默认值, optional: 布尔值,true表示可以为空},

需要先导入1、使用 <WebView source={{uri: '网页地址'}} style={{marginTop: 20}} /> <WebView originWhitelist={['*']} 加载html代码必须设置该属性 source={{ html: '<h1>Hello world</h1>' }} />2、参数 source meth

模态框占据全屏出现后即会占据全屏,意味着要在模态框的视图内提供关闭模态框的事件 1、导入 import {Modal} from 'react-native'2、使用 <Modal visible={布尔值} 控制视图的显示和隐藏 onRequestClose={()=>{}} android必填,会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。请务必注意本属性在 Android 平台上为必填，且会在 moda

在栈导航中,将初始化路由设置为启动页组件,然后在启动页组件中通过定时器跳转到其他组件

1、订阅消息 this.state.subscribe=DeviceEventEmitter.addListener('xx',(data)=>{ ... }) 2、在组件卸载时取消订阅 componentWillMount() { this.state.subscribe.remove(); } 3、发布消息 DeviceEventEmitter.emit('xx',内容);代码示例:订阅:imp

使用前都需要导入1、获取屏幕高宽 Dimensions.get('window').width Dimensions.get('window').height 2、获取系统类型 Platform.OS 'ios'/'android'

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

多图像选择，对裁剪工具的更多控制，以及对横屏的支持等使用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

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

重启服务

1、创建js文件 global.xx=x; 注册全局变量2、在入口文件App.js中导入全局变量js文件,全局使用 import 'xxx/xxxx.js'3、使用 xx

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}

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

1、导入 import {SectionList} from 'react-native'2、使用 <SectionList sections={数组类型数据源} keyExtractor={(item, index) => item + index} key值 renderItem={函数,根据数据源渲染内容并返回组件} renderSectionHeader={(item) => ( <Te

(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

因为一个组件中只能设置一个导航栏(1)在App.js中设置Stack栈导航栏,设置所有通过this.props.navigate导航的路由和默认路由(2)在栈导航的路由中,设置底部导航栏/顶部导航栏,然后再配置相应路由

(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

解决方案:关掉项目,重新运行,react-native run-android --no-jetifier

(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

Android版:1、安装 yarn add react-native-splash-screen 2、导入 import SplashScreen from 'react-native-splash-screen' 3、设置组件挂载后消失 componentDidMount(){ SplashScreen.hide(); } 4、android/...

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...

1、设置动画属性对象 可以通过this设置全局对象 this.xx=new Animated.Value(值);2、将动画属性对象绑定到要动画的组件style上,当属性来使用 如style={{width:this.xx}}3、设置动画 Animated.timing(要改变的动画属性对象,{ toValue:改变动画属性的最终值 duration:持续时间...

组件：如<View style={{对象样式键值对}}></View>react-native样式与原生区别:(1)子元素不能继承父元素样式,如父元素设置字体颜色,子元素不设置,子元素字体颜色无效(2)1、通过StyleSheet创建样式 import {StyleSheet} from 'react-native' const xx=StyleSheet...

1、引入react import React from 'react'2、导入组件，只能使用导入的组件替代html标签,不能使用其他如div等标签 import { //样式组件,通过它来create样式 StyleSheet, //视图组件,类似div View, //文本组件,放置文本内容 Text }3、定义函数式组件const App=()=&gt...

(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 ...