react-native 'react-native-html-to-pdf‘警告

Question

我使用的是一个'react-native-html-to-pdf‘库。我使用它与示例完全一样，但我得到了一个错误。

警告可能未处理的Promise Rejection(id: 0)：TypeError:无法读取未定义TypeError的属性'convert‘：无法读取创建时未定义的属性'convert’

https://github.com/christopherdro/react-native-html-to-pdf

import React, { Component } from 'react'
import { Text, View, Button, YellowBox, FlatList, Image, ScrollView, Dimensions, TouchableHighlight } from 'react-native'
import Swiper from 'react-native-swiper'
import {styles} from '../style/styles'
import RNHTMLtoPDF from 'react-native-html-to-pdf'

class NavtexPage extends Component {
  constructor(props) {//클래스가 생성될때 제일 먼저 실행되는 함수
    YellowBox.ignoreWarnings([
      'Warning: componentWillReceiveProps is deprecated',
      'Warning: componentWillUpdate is deprecated',
    ]);
    super(props);
    this.onPressNext = this.onPressNext.bind(this);
    this.onPressPrev = this.onPressPrev.bind(this);
    this.createPDF = this.createPDF.bind(this);

  }


  //깃허브 컴포넌트
  renderPagination = (index, total, context) => {
    return (
      <View style={styles.paginationStyle}>
        <Text style={{ color: 'grey' }}>
          <Text style={styles.paginationText}>{index + 1}</Text>/{total}
        </Text>
      </View>
    )
  }

  //이전
  onPressPrev = () => {
    const { indexPage } = this.state;
    if (indexPage > 0) {
      this.refs.swiper.scrollBy(-1);
    }
  }

  //다음
  onPressNext = () => {
    const { indexPage } = this.state;
    // Probably best set as a constant somewhere vs a hardcoded 5
    if (indexPage < 4) {
      this.refs.swiper.scrollBy(1);
    }
  }

  async createPDF() {//pdf libray
    let options = {
      html: '<h1>PDF TEST</h1>',
      fileName: 'test',
      directory: './data/',
    };
    console.log('pdf' + options)
    let file = await RNHTMLtoPDF.convert(options)
    // console.log(file.filePath);
    alert(file.filePath);
  }

  //시작
  render() {

    return (
      <View style={styles.container}>
        <View style={{ flex: 0.1, backgroundColor: 'green' }}>
          <Text>NAVTEX</Text>
        </View>

        {/* {깃허브 컴포넌트} */}
        <Swiper
          style={styles.wrapper}
          onIndexChanged={indexPage => this.setState({ indexPage })}
          renderPagination={this.renderPagination}
          showsButtons={false}
          loop={false}
          ref={'swiper'}
        >
          <View style={styles.slide}>
            <FlatList
              style={{ flex: 1, marginTop: 50, borderWidth: 1, borderColor: 'red' }}
              data={this.state.data}
              numColumns={1}
              renderItem={this._renderItem}
              keyExtractor={(item, index) => item.no.toString()}/>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>2</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>3</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>4</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>5</Text>
            <TouchableHighlight  onPress={this.createPDF}>
              <Text>Create PDF</Text>
            </TouchableHighlight >
          </View>
        </Swiper>

        <View style={styles.buttoncontainer}>
          <Button
            style={{ with: 75 }}  
            onPress={this.onPressPrev}
            title="Previous">
          </Button>
          <Button
            onPress={this.onPressNext}
            title="Next">
          </Button>
        </View>
      </View>
    );
  }
}

Answer 1

它只是简单的链接错误

链接您的npm：

react-native link react-native-html-to-pdf

Android全部设置&在IOS中，您需要安装POD

cd ios, pod install

错误已解决

Answer 2

当链接失败时，我遇到了这个问题。

确保xcode没有运行，并再次尝试"react-native link react-native-html-to-pdf“(如果您使用的是pod，则使用pod install )。如果此操作失败，请遵循github手动链接过程：

https://github.com/christopherdro/react-native-html-to-pdf#option-2-manual