React Native つかってローカルの PDF 表示 #iOS

2017-01-08 追記 : React Native PDF View には 2 ページ目が表示されない不具合があります。。

調べてみたら React Native の WebView は UIWebView を使っていたので、これを WKWebview に切り替えてみたところうまく動きました。

ライブラリは React Native WKWebView を使っているのですがローカルファイルに対応するプルリクを投げてくれている人がいて、そちらを yarn add tomasc/react-native-wkwebview で入れてみたところ、うまく動きました。

上記のプルリクがマージされてからのほうが良いとは思いますが、ひとまずこんな感じでマージ前のものを導入できます。

2017-01-05 追記 : 下記のやり方でも、結局 iPad では表示されたりされなかったりする状況でした。代わりに React Native PDF View というライブラリを使っています。

環境: シミュレータ iPhone 6, iOS 10.2

PDF のパスを WebView に渡してやれば普通に見れる。というのはまぁちょっと調べたらすぐに出てきたんだけども、最初下記のようなコンポーネントを書いて props で渡したら、シミュレータで PDF が表示されたりされなかったりした。

// !!!これは動かなかった例です!!!
export default class FileView extends Component {
  render () {
    return <WebView source={{uri: this.props.path}}/>
  }
}

下記のように componentDidMount で state に渡してやると、必ず表示されるようになった。

// これは動きました
export default class FileView extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentDidMount () {
    this.setState({
      path: this.props.path
    })
  }

  render () {
    if (this.state.path) {
      return <WebView source={{uri: this.state.path}}/>
    } else {
      return null
    }
  }
}

https://google.com とか渡してやると何も問題ないのでバグかも知れない。けど入門したばっかなので何とも言えない