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

react-native 所有的文字显示必须用

标签包裹

页面滚动标签

• react-native与PC不同的的其中一点就是，如果高度高出屏幕高度不会自动撑开，添加滚动条
• 如果要想页面滚动就需要添加这个标签
• 添加须要指定高宽，不然不会生效
• 如果外层标签已指定高宽，则可以给定flex:1属性(官网默认推荐)

标签如果里面还嵌套有另外一个同样的标签，默认内部的是不会滚动的

• 如果想要外部内部的都生效
• 外部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 (
      
        
         {
            NavigationService.setTopLevelNavigator(navigatorRef);
          }}
        />
         { global.loading = loading }}>
         { global.toast = toast }}>
      
    )
  }

}

禁用全局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"
    }

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