RN项目实战中常见问题

目录
一、Could not get BatchedBridge, make sure your bundle is packaged correctly com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
二、openPicker or openCamera
如果您以 Android 10（API 级别 29）或更高版本为目标平台，请在应用的清单文件中将 requestLegacyExternalStorage 的值设置为 true
三、打开高德地图和百度地图导航
四、安卓TextInput多行文本输入时不靠顶
五、保存图片到手机相册

一、 Could not get BatchedBridge, make sure your bundle is packaged correctly com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)

解决办法注释以下代码：

if (useIntlJsc) {
        implementation 'org.webkit:android-jsc-intl:+'
} else {
        implementation 'org.webkit:android-jsc:+'
}

二、openPicker or openCamera

如果您以 Android 10（API 级别 29）或更高版本为目标平台，请在应用的清单文件中将 requestLegacyExternalStorage 的值设置为 true

 <manifest ... >
      <!-- This attribute is "false" by default on apps targeting
           Android 10 or higher. -->
        <application android:requestLegacyExternalStorage="true" ... >
          ...
        </application>
    </manifest>

三、打开高德地图和百度地图导航

import React, { Component } from 'react';
import { TouchableOpacity, TouchableHighlight,Linking,StyleSheet, View, Image, Text, Modal,Platform } from 'react-native';
import { connect } from 'react-redux';
import { screenW, screenH } from '../util/ScreenUtil';
import { gcj02towgs84 ,wgs84togcj02} from '../util/YFLocation';
import YFCurLocationView from   '../util/YFCurLocationView';
import { actionAccount } from '../redux/action';
import Toast, { DURATION } from 'react-native-easy-toast';

class EventMapNavigation extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        spinkitVisible: false,
        spinkitSize: 100,
        spinkitType: 'FadingCircleAlt',
        spinkitColor: '#2C96F6',
      } 
    }
    componentDidMount() {
        this.setState({
            statusBarHeight: this.props.account.statusBarHeight
        })
    }
 
    gaodeNav=()=>{
      var curPosition = this.props.route.params?.curPosition;
      var lat=0;
      var lon=0;
      if(curPosition!=null){
        let array=curPosition.split(',');
      if(array.length>1){
           lat=parseFloat(array[1]);
          lon=parseFloat(array[0]);
          }
        }
     
      var url="";
      let  webUrl=`http://uri.amap.com/navigation?to=${lon},${lat},${'数字孪生'}&mode=bus&coordinate=gaode`;
        if(Platform.OS=='iOS'){
           url="iosamap://navi?sourceApplication=数字孪生&lat="+lat+"&lon="+lon+"&dev=0";
        }else{
            url="androidamap://navi?sourceApplication=数字孪生&lat="+lat+"&lon="+lon+"&dev=0";
         }
            Linking.canOpenURL(url).then(supported => {
                if (!supported) { 
                   return Linking.openURL(webUrl).catch(e => console.warn(e));
                } else {
                    return Linking.openURL(url).catch(e => console.warn(e));
                }
            }).catch(err => {
                this.refs.toast.show(err.message);
            } );
    }
   
    baiduNav=()=>{
        var   curPosition = this.props.route.params?.curPosition;
        var address=this.props.route.params?.address;
        var lat=0;
        var lon=0;
        if(curPosition!=null){
          let array=curPosition.split(',');
          if(array.length>1){
            lat=parseFloat(array[1]);
            lon=parseFloat(array[0]);
          }
         }
 
              let    url=`baidumap://map/direction?origin={{我的位置}}&destination=latlng:${lat},${lon}|name:${address}&mode=driving&coord_type=gcj02`;
              let    webUrl=`http://api.map.baidu.com/direction?destination=latlng:${lat},${lon}|name=${address}&mode=transit&coord_type=gcj02&output=html&src=mybaoxiu|wxy`;
         
              Linking.canOpenURL(url).then(supported => {
                  if (!supported) { 
                      return Linking.openURL(webUrl).catch(e => console.warn(e));
                  } else {
                      return Linking.openURL(url).catch(e => console.warn(e));
                  }
              }).catch(err => {
                  this.refs.toast.show(err.message);
              } );
    }
  
  
    render() {
      return (
        <View style={{ width: screenW, flex: 1, }}>
          <View style={{ backgroundColor: '#2c96f6', width: screenW, height: Platform.OS == 'android' ? 0 : this.state.statusBarHeight }}></View>
        <View style={{ backgroundColor: "#2c96f6", height: 44, flexDirection: 'row', alignItems: 'center' }}>
          <TouchableOpacity activeOpacity={0.9} style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => this.props.navigation.goBack()}>
            <Image source={require('../images/device/back-icon.png')} style={{ marginLeft: 7, width: 28, height: 28 }} />
          </TouchableOpacity>
        
            <View style={{ width: screenW - 72, height: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
              <Text style={{ color: '#ffffff', fontSize: 18 }}>导航</Text>
            </View>
           
        </View>

        <YFCurLocationView style={{ width: screenW ,flex:1 }}  curPosition={this.props.route.params?.curPosition}  onClick={(map)=>{  }}   /> 
          
       <View style={{height:45,width:screenW,backgroundColor:'#ffffff',flexDirection:'row', justifyContent:'space-between',alignItems:'center'}}>
       <TouchableOpacity activeOpacity={0.9}   onPress={()=> this.gaodeNav()}>
        <View style={{width:screenW/2.0,flexDirection:'row', justifyContent:'center',alignItems:'center'}}><Text>高德地图</Text></View>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.9}   onPress={ ()=> this.baiduNav()}>
        <View style={{width:screenW/2.0,flexDirection:'row', justifyContent:'center',alignItems:'center'}}><Text>百度地图</Text></View>
        </TouchableOpacity>
       </View>
       
       <Toast ref="toast" position='center' opacity={.8} />
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'white',
      width: screenW,
      flex: 1
    },
  })
 
  const stateToProps = (state) => {
    return {
      account: state.account
    }
  }
  
  const dispatchToProps = (dispatch) => {
    return {
        loginChange() {
            let action = actionAccount('false', '', '', {}, '',0)
            dispatch(action)
        }
    }
  }
  export default connect(stateToProps, dispatchToProps)(EventMapNavigation);

四、安卓TextInput多行文本输入时不靠顶

TextInput.jpg

<TextInput multiline={true} textAlignVertical="top"  
 style={{ width: screenW - 30, marginTop: 10, fontSize: 10, color: '#646464', height: 125, borderColor: '#e6e6e6', borderRadius: 5, borderWidth: 1, borderStyle: 'solid' }}
 placeholderTextColor={'#c8c8c8'} 
onChangeText={(text) => { this.setState({ description: text }); }} 
value={this.state.description} placeholder='请输入备注内容' />

五、保存图片到手机相册

  saveImg=()=>{
      let uri = this.state.userImgUrl;
      let ref=this.refs;
      if (Platform.OS == 'ios') {
          let promise = CameraRoll.save(uri);
          promise.then((result) => {
            ref.toast.show("图片保存成功");
          }).catch((error) => {
              ref.toast.show("图片保存失败");
          });
      } else {
          const storeLocation = `${RNFS.DocumentDirectoryPath}`;
          let pathName = new Date().getTime() + "image.png"
          let downloadDest = `${storeLocation}/${pathName}`;
          const ret = RNFS.downloadFile({ fromUrl: uri, toFile: downloadDest });
          ret.promise.then(res => {
              if (res && res.statusCode === 200) {
                  var promise = CameraRoll.save("file://" + downloadDest);
                  promise.then((result) => {
                    ref.toast.show("图片保存成功");
                  }).catch((error) => {
                    ref.toast.show("图片保存失败");
                  });
              }
          })
      }
  }

关注公众号，查看更多内容.jpg