search

Sunshine168 / resume

My resume
3 stars 1 forks source link

react-native 问题锦囊 #3

Open Sunshine168 opened 6 years ago

Sunshine168 commented 6 years ago

项目配置

系统环境 mac os sierra 10.12.6

模拟器 ios/11 android 4.4/7.0

依赖 版本
react-native 0.48.3
react-navigation 1.0.0-beta.11
react-native-root-siblings ^1.2.1
react-native-root-siblings ^1.2.1
react-native-progress 3.4.0
react-native-scrollable-tab-view "^0.8.0

问题按照关键字罗列

"_OBJCCLASS$_RCTSRWebSocket",

问题详情

Undefined symbols for architecture arm64:
  "_OBJC_CLASS_$_RCTSRWebSocket", referenced from:
      objc-class-ref in libReact.a(RCTInspectorPackagerConnection.o)
  "_OBJC_CLASS_$_RCTReconnectingWebSocket", referenced from:
      objc-class-ref in libReact.a(RCTPackagerConnection.o)
ld: symbol(s) not found for architecture arm64

产生原因：

通过xcode运行项目的时候进行了非法重启，导致项目损坏

解决办法

重启添加RCTSRWebSocket, 把react-native/Libraries/WebSocket 的xcodeproj 重新拉到xcode中 在xode 项目下的 targets 项目Build Phases 中的LinkBanary with Libraries 中移除 RCTSRWebSocket 并重新添加

移除react-native-vector-icons依赖

yarn remove react-native-vector-icons
/*   由于需要链接原生模块,直接移除可能依然会导致打包报错
    此时就需要需要手动移除lib和加载的字体,
  ios通过xcode打开项目在目录下的Libraries 移除 RNVectorIcons.xcodeproj,
  以及在Build Phases中找到无效的字体文件并移除
*/

react-native-swiper 安卓不显示的问题

解决办法

通过给图片以及容器按照屏幕设置高度即可

react-native 运行白屏

问题详情

react-native 0.0% (0/1)
Bundling `index.ios.js`  
[development, non-minified, hmr enabled]  ░░░░░░░░░░░░░░░░  0.0% (0/1)
watchman warning:  opendir(/Users/MacBook/Library/Saved Application State/com.bitrock.appinstaller.savedState) -> Permission denied. Marking this portion of the tree delete

解决办法

npm run start -- --reset-cache

native-echarts 相关问题

安装失败导致红屏

解决：移除native-echarts,手动clone项目然后再移要项目中

android无法显示的问题

修改的是 \node_modules\native-echarts\src\components\Echarts\index.js中的代码，具体如下： 源代码为：source={require('./tpl.html')} 修改为：source={{uri:'file:///android_asset/tpl.html'}} 同时需要将tpl.html放入android/main/src/assets中

react-navigation

集成redux

集成redux支持android物理饭返回键

class AppWithNavigationState extends Component {
  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
  }
  onBackPress = () => {
    const { dispatch, nav } = this.props;
    if (nav.index === 0) {
      return false;
    }
    dispatch(NavigationActions.back());
    return true;
  };
  render() {
    const { dispatch, nav } = this.props;
    return (
      <AppNavigator
        navigation={addNavigationHelpers({ dispatch, state: nav })}
      />
    );
  }
}

custom navigation bar

https://github.com/react-community/react-navigation/issues/702

Sunshine168 commented 6 years ago

简单兼容ios 8

因为ios 8会缺失一些es6方法只需要在入口的app.js引入这个polyfill

/**
 * ios8与android6 以下会缺少一些es6的方法。
 */
require('react-native-polyfill')

通过 react-native-config 使项目可配置化的时候需要注意