React Native ビュー コンポーネント

今回は React Native ビュー コンポーネントについて説明します。React Native ビュー コンポーネントの 注意事項 は何ですか? 実際のケースを見てみましょう。

この記事ではReact Nativeで画像コンポーネントを閲覧する方法を中心に紹介していますが、編集者がかなり良いと思ったので、参考にさせていただきます。エディターをフォローして見てみましょう

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

レンダリング

インストールメソッド

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

使用例

const images = [
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
];
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>
  );
 }
}

主なパラメータの説明

1. imageUrls 画像URLアドレスの配列

2. ableIm ageZoom ズームを許可するかどうか

3. failImageSource読み込み失敗時に表示される画像

4. loadingRender読み込み

5. renderHeaderヘッダースタイル

6. renderFooterbottomスタイル

7. renderIndicatorページ番号インジケータースタイル

この記事を読んだと思いますマスターしました方法、さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注意ください。

推奨読書:

WeChat Web側でバックフォースリフレッシュを実装する方法

jsを使用してHTMLページ内の画像のアドレスを素早く取得する

以上がReact Native ビュー コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。