react-native常见问题及处理办法

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"
    }

总结使用中遇到的一些问题，以及解决办法，如有写的不正确的，还请指正

最后编辑于：2019.11.18 16:32:43