iOS
React
reactnative

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

More than 1 year has passed since last update.

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 とか渡してやると何も問題ないのでバグかも知れない。けど入門したばっかなので何とも言えない :neutral_face: