react native09 安装第三方插件汇总(实际项目中使用

2019-11-28  本文已影响0人  蜗牛的学习方法

1、微信 react-native-wechat

地址:http://blog.csdn.net/sinat_17775997/article/details/68485863

安装之后如果xcode里面运行报错则执行下面的

如果报错 找不到 third-party 则在 build Phases下面找到libthirdparty.a文件 删掉该文件就不报错了

2、微博 react-native-weibo

地址:

3、图表 react-native-echart

安装之后会出现出不来图形的问题 则需要修改下面的native-echart/src/components/echart.index.js文件内容:

import React, { Component } from 'react';
import { WebView, View, StyleSheet,Platform } from 'react-native';
import renderChart from './renderChart';
import echarts from './echarts.min';

export default class App extends Component {
  componentWillReceiveProps(nextProps) {
    if(nextProps.option !== this.props.option) {
      this.refs.chart.reload();
    }
  }

  render() {
      let source;
      if (__DEV__) {
          source = require('./tpl.html');
      } else {
          source = Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' };
      }
    return (
      <View style={{flex: 1, height: this.props.height || 400,}}>
        <WebView
          ref="chart"
          scrollEnabled = {false}
          originWhitelist={['*']}
          injectedJavaScript = {renderChart(this.props)}
          style={{
            height: this.props.height || 400,
            backgroundColor: this.props.backgroundColor || 'transparent'
          }}
          scalesPageToFit={Platform.OS === 'ios'?false:true}
          source={source}
          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
        />
      </View>
    );
  }
}

4、支付宝支付 react-native-yunpeng-alipay

上一篇下一篇

猜你喜欢

热点阅读