ReactでNativeを使った画像閲覧コンポーネントを実装する-jsチュートリアル-php.cn

ReactでNativeを使った画像閲覧コンポーネントを実装する

亚连

リリース： 2018-06-02 11:11:50

オリジナル

2220 人が閲覧しました

この記事ではReact Nativeで画像コンポーネントを表示する方法を中心に紹介しますので、参考にしてください。

React Native 画像表示コンポーネント: React-native-image-viewer、純粋な JS コンポーネント、小さくて高速なアイコン表示コンポーネント。画像のズームインとズームアウト、画像の読み込みに失敗した場合の代替画像の設定、画像のローカル保存をサポートします。

レンダリング

インストール方法

npm i react-native-image-zoom-viewer --save

ログイン後にコピー

使用例

const images = [
 {
  url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
 },
 {
  url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
 },
 {
  url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
 },
];

export default class Component06 extends Component {
 constructor(props) {
  super(props);
 }

 render() {
  return (
   <View style={{ flex: 1 }}>
    <ImageViewer
     imageUrls={images}
     failImageSource={{
      url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
      width: Dimensions.get(&#39;window&#39;).width,
      height: Dimensions.get(&#39;window&#39;).width,
     }}
    />
   </View>
  );
 }
}

ログイン後にコピー

主なパラメータの説明