react-native 所有的文字显示必须用
<Text></Text>标签包裹
<Scrollview></Scrollview>页面滚动标签
- react-native与PC不同的的其中一点就是,如果高度高出屏幕高度不会自动撑开,添加滚动条
- 如果要想页面滚动<Scrollview>就需要添加这个标签
- 添加<Scrollview>须要指定高宽,不然不会生效
- 如果<Scrollview>外层标签已指定高宽,则可以给定flex:1属性(官网默认推荐)
<Scrollview></Scrollview>标签如果里面还嵌套有另外一个同样的标签,默认内部的是不会滚动的
- 如果想要外部内部的<Scrollview></Scrollview>都生效
- 外部scollview设置scrollEnabled={this.state.scoll}
- 然后在内部scollview里面的点击函数加上,onPressIn和onPressOut操作
- onPressIn时设置scoll为false,这样外部scollview就不能滑动了,内部scollview就能滑动了。
- onPressOut时则设置scoll为true 这样就解决了内外部的滚动冲突问题
- react-native里面如果要实现阴影效果IOS默认是可以通过样式实现,但是Android要实现需要添加
elevation:(number)
margin或者padding属性,不能像写css那样直接写多个值
- marginVertical 同时设置marginTop和marginBottom。
- marginHorizontal 同时设置marginLeft和marginRight。
- padding也是同样的
在App里面,一般有启动图,引导页,注册页,但是一般引导页,跟注册页,默认是不能返回的,在react-navigation组件中要实现不能返回的页面有两种办法
//替换当前路由
this.props.navigation.replace('被替换的路由’)
//重置路由
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);
在组件或其他没有props的地方调用路由跳转
- 创建一个NavigationService.js的文件,里面封装路由的一些方法
- 在根目录通过ref属性,拿到路由的实例
import { NavigationActions } from 'react-navigation';
let _navigator;
//通过ref属性拿到路由的实例
function setTopLevelNavigator(navigatorRef) {
_navigator = navigatorRef;
}
function navigate(routeName, params) {
_navigator.dispatch(
NavigationActions.navigate({
routeName,
params,
})
);
}
function back(key){
_navigator.dispatch(
NavigationActions.back({
key
})
)
}
// add other navigation functions that you need and export them
export default {
navigate,
setTopLevelNavigator,
back
};
import React, { Component } from 'react';
import StackNavigator from './src/router/StackNavigation/StackNavigation';
import { StatusBar, SafeAreaView,} from 'react-native'
import { createAppContainer } from 'react-navigation';
import NavigationService from './src/utlis/NavigationService';
const Navigator = createAppContainer(StackNavigator);
export default class App extends Component {
/**
* SafeAreaView避免文字显示在像iPhone X那样的刘海位置
* StatusBar全面屏手机沉浸式顶部实现
* Navigator全局路由分发,实现未注册的组件也可以调用路由方法
*/
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<StatusBar backgroundColor={'#DB3F40'} />
<Navigator
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
<Loading ref={(loading) => { global.loading = loading }}></Loading>
<Toast ref={(toast) => { global.toast = toast }}></Toast>
</SafeAreaView>
)
}
}
禁用全局console的输出
if (!__DEV__) {
global.console = {
info: () => {},
log: () => {},
warn: () => {},
debug: () => {},
error: () => {}
};
}
- React Native 中有一个全局变量DEV用于指示当前运行环境是否是开发环境。我们可以据此在正式环境中替换掉系统原先的 console 实现。
- 这样在打包发布时,所有的控制台语句就会被自动替换为空函数,而在调试时它们仍然会被正常调用。
绕过校验https
android/bulid.gradle
//targetSdkVersion 的版本号改到26就可以
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28 // =>26
supportLibVersion = "28.0.0"
}
总结使用中遇到的一些问题,以及解决办法,如有写的不正确的,还请指正