AnitaSun的博客

在Android开发的时候，如果有加载网页的需求或者执行一些Javascript，可以使用WebView属性automaticallyAdjustContentInsets控制是否调整放置在导航条、标签栏或工具栏后面的web视图的内容。默认值为truecontentInset {top: number, left: number, bottom: number, right: number}设置网页内嵌边距injectedJavaScript设置在网页加载之前注入一段js代码media.

方式一：postMessage这种方式适用于React Native自身的WebView组件，但在版本0.59时会提示WebView将被弃用RN端向H5发送消息RN端onLoadEnd={() => { this.refs.webView.postMessage('RN向H5发送的消息');}}H5端// 这个监听的名字只能叫messagewindow.onload = function() { document.addEventListener('message

属性size：设置滚轮的大小large small，默认是small在android中可以设置数字：size={75}color：设置滚轮的颜色，默认是whiteanimating：是否要显示指示器动画，默认为true表示显示，false则隐藏hidesWhenStopped（IOS）：在animating为 false 的时候，是否要隐藏指示器（默认为 true）。如果animating和hidesWhenStopped都为 false，则显示一个静止的指示器代码<Activity

react-native-tab-view安装：npm install --save react-native-tab-view使用：import * as React from 'react';import { Animated, View, Text, TouchableOpacity, Dimensions, StyleSheet,} from 'react-native';import {TabView, SceneMap, TabBar} from 're

import React, { Component } from 'react';import { View } from 'react-native';import RankCard from '../../components/bussiness/rankCard/rankCard';import { flexColumnSpb } from '../../utils/StyleUtils';import RefreshListView, { RefreshState,} from '..

@react-navigation/material-top-tabs安装npm install --save @react-navigation/native react-navigation/material-top-tabs react-native-tab-viewdescription：代码：import * as React from 'react';import {Text, View} from 'react-native';import {NavigationContain

react-native-restart配置请参考官方文档使用：import RNRestart from 'react-native-restart';onPress={() => { RNRestart.Restart();}}

类型TouchableWithoutFeedback：点击之后没有任何效果TouchableHighlight: 点击之后背景会变暗，同时不透明度会降低TouchableOpacity: 点击之后会改变透明度TouchableNativeFeedback: 点击之后会有水纹的效果（只支持android）TouchableWithoutFeedback这个组件一般不使用常见的使用场景比如想实现点击空白处触发某个操作，那么就可以把空白部分用TouchableWithoutFeedback

TextInput基本使用import { TextInput, TouchableOpacity } from "react-native";<View> <TextInput placeholder="输入手机号码" placeholderTextColor="#918D87" maxLength={11} onSubmitEditing={this.phoneNumberSubmitEditing} onChangeText={th

下载： npm install --save react-native-document-picker引入：import DocumentPicker from 'react-native-document-picker';使用：基本使用：/** * res： * { * "fileCopyUri": "content://media/external/images/media/13", * "name": "IMG_20210322_071512.jpg", * "s.

使用 react-native-image-crop-picker图片裁切组件安装yarn add react-native-image-crop-picker 使用import ImagePicker from 'react-native-image-crop-picker'; const image = await ImagePicker.openPicker({ // 选择完图片之后将要被裁剪的宽和高 width: 300, height: 400, //

react-native-picker自定义picker安装yarn add react-native-picker代码import Picker from 'react-native-picker'; Picker.init({ pickerData: CityJson, selectedValue: ["北京", "北京"], wheelFlex: [1, 1, 0], // 显示省和市 pickerConfirmBtnT

使用 react-native-amap-geolocation高德地图组件分别使用了两个功能，一个是AndroidSDK和一个web服务申请 高度地图的key下载依赖yarn add react-native-amap-geolocation配置文件编辑 android/settings.gradle，设置项目路径：+ include ':react-native-amap-geolocation'+ project(':react-native-amap-geo

react-native-datepicker日期选择框安装yarn add react-native-datepicker 引入import DatePicker from 'react-native-datepicker';使用 const dateNow=new Date(); const currentDate = `${dateNow.getFullYear()}-${dateNow.getMonth() + 1}-${dateNow.getDate()}`;

第三章 React-native - 基础React Native 介绍文件目录结构JSXRN样式基本标签插值表达式调试事件生命周期mobxReact Native 介绍文件目录结构│ App.js --- 项目的根组件│ index.js --- 项目的入口文件 │ package.json --- 项目的描述文件 │ .eslintrc.js --- eslint的配置

import { pxToDp } from './pxToDp';// 使用...padding(30, 30, 30, 0)export const padding = function ( paddingLeft, paddingTop, paddingRight, paddingBottom,) { return { paddingTop: pxToDp(paddingTop), paddingLeft: pxToDp(paddingLeft),

// 格式化时间的一个插件const moment = require('moment');moment.locale('zh-CN');import LocalStorageUtils from './LocalStorageUtils';export default { /** * 格式化时间 * @param {number} timestamp - 13位时间戳 * moment("20111031", "YYYYMMDD").fromNow(); */ fo

一、js FromData方法介绍构造函数创建一个空对象实例var formData = new FormData();此时可以调用append()方法来添加数据使用已有的表单来初始化一个对象实例假如现在页面已经有一个表单<form id="myForm" action="" method="post"> <input type="text" name="name">名字 <input type="password" name="psw">密

request.jsapi.jsconst api = { login: { url: '/api/auth/password', method: 'post', },};export default api;import axios from 'axios';import server from './api';// 拿taken，在请求拦截器中添加import RootStore from '../mobx';import LocalStorageUtil

小技巧关闭黄色警告// 把下面这两句代码加入到入口文件（index.js中）console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty string','Invalid props.style key']; console.disableYellowBox = true // 关闭全部黄色警告

'use strict';import { Dimensions } from 'react-native';export const deviceHeightDp = Dimensions.get('window').height;export const deviceWidthDp = Dimensions.get('window').width;const uiWidthPx = 750;export function pxToDp(uiElementPx) { return (

如果双击，返回true；如果不是，返回false;let times = 0;export function onDoublePress() { times++; if (times === 1) { let timeID = setTimeout(() => { times = 0; clearTimeout(timeID); return false; }, 300); } else if (times === 2) { .

// util.jsimport { Text, TextInput, Platform } from 'react-native';import PropTypes from 'prop-types';const TextRender = Text.render;let customStyle = {};// 重点，Fix Android 样式问题if (Platform.OS === 'android') { customStyle = { fontFamily: 'Ping

'use strict';export default function computeTime(time) { // time format 2016-11-11T18:56:33.904Z const datePart = time.substring(0, 10).replace(/\-/g, '/'); const timePart = time.substring(11, 19); //console.log(datePart + ' ' + timePart); cons

Toast在common文件夹下新建Toast文件夹，把这里面的两个文件放进去（Toast）Toast.js// Toast.js'use strict';import React, { Component } from 'react';import { View } from 'react-native';import Overlay from '../Overlay/Overlay';import ToastView from './ToastView';export defa

react-native-element下载需要使用到图标 因此也需要安装 react-native-vector-iconsnpm install --save react-native-elements react-native-vector-icons引入和使用import { Icon } from 'react-native-elements'<Icon name='rowing' />使用react-native-vector-icons编辑 android

react-native-linear-gradient下载：npm install --save react-native-linear-gradient使用：import LinearGradient from 'react-native-linear-gradient';<LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} colors={['#FFD801', '#ffc005', '#e6ad05']

地址：https://www.npmjs.com/package/react-native-confirmation-code-field下载：npm install --save react-native-confirmation-code-field代码：import React, {Component} from 'react';import {SafeAreaView, Text, StyleSheet} from 'react-native';import { CodeFi.

StatusBar顶部状态栏透明引入: import {StatusBar} from 'react-native';<StatusBar backgroundColor="transparent" translucent={true} />

从网站上获取Svg的方法地址： https://www.iconfont.cn/找到你想要的图标点击下载之后就下载到了本地然后点击我的项目把刚才的图标上传图标至项目，然后点击下载到本地复制黄色的代码在代码中使用import SvgUri from 'react-native-svg-uri';const female='<svg ......'; <SvgUri width="23" height="23" svgXmlData={female} /&g

blankPage—页面初始化先渲染空视图减少页面转场时间import React, { PureComponent } from 'react';import { View, Image } from 'react-native';export default class BlankPage extends PureComponent { render() { return ( <View style={{ flex: 1,

新建一个constant.js，专门负责初始化全局变量import { Dimensions, Platform, StatusBar } from 'react-native';global.width = Dimensions.get('window').width;global.height = Dimensions.get('window').height;在项目的入口文件（index.js）第一行导入constant.jsimport './tools/constant'; //初始.

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。Flex Direction — 决定子元素排列的方向row 水平轴column 竖直轴（默认的）row-reversecolumn-reverseimport React from "react";import { StyleSheet, Text, .

安装使用npm：npm install --save axios使用cdn<script src="https://unpkg.com/axios/dist/axios.min.js"></script>简介Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。GET请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response).

引入import { DeviceEventEmitter } from 'react-native'添加监听/** * @param {string} eventType - Name of the event to listen to * @param {function} listener - Function to invoke when the specified event is * emitted * @param {*} context - Optiona

mobx——>userStore.js// 存放一些用户信息export default { accessToken: '', refreshToken: null, userId: '', name: '', age: '', gender: '', password: '', img: '',};mobx——>globalStore.jsexport default { // 存放一些全局的变量 // 发送请求的 Http: {},

官网地址：@react-native-async-storage/async-storage使用Async Storage 只能用来储存字符串数据，所以为了去储存object类型的数据，得先进行序列化（JSON.stringify()）当你想要使用数据的时候，就可以使用JSON.parse()储存数据setItem() 储存的是键值对储存string类型的值：const storeData = async (value) => { try { await Async.

react中全局数据管理库 可以简单的实现数据的跨足剑共享使用步骤安装依赖mobx核心库mobx-react方便在react中使用mobx技术的库@babel/plugin-proposal-decorators让 rn 项目支持 es7 的装饰器语法的库yarn add mobx mobx-react @babel/plugin-proposal-decorators在babel.config.js添加以下配置plugins: [ ['@babel/plugin-propo.

单行注释：CTRL + /多行注释：【Alt + Shift + A】移动行：Alt + up/down复制当前行：Shift + Alt + up/down删除当前行：Shift + Ctrl + k撤销：Ctrl + z代码格式化：Ctrl + k + f折叠代码：Ctrl + k + 0展开代码：Ctrl + k + j全局查找文件：Ctrl + Shift + f查找文件：Ctrl —— f显示/隐藏左侧目录栏：Ctrl + b新建一个窗口：Ctrl + Shift +.

适合使用refs的情况：管理焦点，文本选择或媒体播放触发强制动画化集成第三方DOM库创建RefsReact.createRef() 创建this.myRef.current就代表divclass MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <.