ReactNative で Toast を実装した例の共有

この記事ではReactNativeでToastを実装した例を中心に紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Android 開発エンジニアにとって、Toast はプロンプト メッセージを表示したり、自動的に非表示にしたりするために使用されます。 RN アプリケーションを開発する場合、このような効果を実現するのは少し難しいですが、RN が正式に提供する API ToastAndroid を採用するだけで、まったく難しいことではありません。これは Android でのみ使用でき、iOS で使用すると効果がありません。そのため、今日の記事では、Android と iOS の両方で実行できるように Toast をカスタマイズする必要があります。操作効果。

ソースコードポータル

コンポーネントを定義します

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Easing,
  Dimensions,
  Text,
  Animated
} from 'react-native';
import PropTypes from 'prop-types';
import Toast from "./index";
const {width, height} = Dimensions.get("window");
const viewHeight = 35;
class ToastView extends Component {
  static propTypes = {
    message:PropTypes.string,
  };
  dismissHandler = null;

  constructor(props) {
    super(props);
    this.state = {
      message: props.message !== undefined ? props.message : ''
    }
  }

  render() {
    return (
      <View style={styles.container} pointerEvents=&#39;none&#39;>
        <Animated.View style={[styles.textContainer]}><Text
          style={styles.defaultText}>{this.state.message}</Text></Animated.View>
      </View>
    )
  }
  componentDidMount() {
    this.timingDismiss()
  }

  componentWillUnmount() {
    clearTimeout(this.dismissHandler)
  }


  timingDismiss = () => {
    this.dismissHandler = setTimeout(() => {
      this.onDismiss()
    }, 1000)
  };

  onDismiss = () => {
    if (this.props.onDismiss) {
      this.props.onDismiss()
    }
  }
}

const styles = StyleSheet.create({
  textContainer: {
    backgroundColor: &#39;rgba(0,0,0,.6)&#39;,
    borderRadius: 8,
    padding: 10,
    bottom:height/8,
    maxWidth: width / 2,
    alignSelf: "flex-end",
  },
  defaultText: {
    color: "#FFF",
    fontSize: 15,
  },
  container: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    flexDirection: "row",
    justifyContent: "center",
  }
});
export default ToastView

まず必要な基本コンポーネントとAPIをインポートし、カスタムコンポーネントはそれを継承する必要があります。ディメンションはアニメーションを実装するために使用され、イージングは​​軌道を設定するために使用されますアニメーションの実行エフェクトでは、PropTypes を使用して属性タイプを定義します。

render メソッドは、コンポーネントのレンダリングを定義するためのエントリ ポイントです。最も外側のビューは位置を絶対値として使用し、画面全体に表示されるように左、右、上、下を 0 に設定します。トースト表示中のクリックを監視することはできません。内側のViewはToastで表示される黒枠のコンテナで、backgroundColor属性はrgba形式で設定されており、色は黒、透明度は0.6です。そして角丸と最大幅を画面幅の半分に設定します。次に、Text コンポーネントを使用して特定のプロンプト情報を表示します。

属性メッセージのタイプを文字列に制限するために propTypes が使用されていることもわかります。コンストラクターはコンポーネントの構築メソッドであり、渡されるプロパティである props パラメーターを持っています。 super(props) はコンストラクターで最初に呼び出す必要があることに注意してください。そうしないと、エラーが報告されます。ここでは、渡された値を状態に設定します。

トーストの場合、表示はしばらくすると自動的に消えます。この効果は、componentDidMount でこのメソッドを呼び出すことで実現できます。この時間は 1000 ミリ秒に設定されています。そして隠された破壊が暴露される。 setTimeout を使用する場合、コンポーネントがアンロードされるときにタイマーをクリアする必要もあります。コンポーネントがアンマウントされると、componentWillUnmount がコールバックされます。ここでタイマーをクリアしてください。

アニメーション効果を実現

上記でトースト効果を実装しましたが、表示と非表示が過度にアニメーション化されておらず、少し硬いです。次に、移動と透明度のアニメーションを追加し、componentDidMount を変更してアニメーション効果を実現します

コンポーネントに 2 つの変数を追加します

moveAnim = new Animated.Value(height / 12);
  opacityAnim = new Animated.Value(0);

以前の内部ビュー スタイルでは、下部のセットは高さ/8 でした。ここでは、ビュー スタイルを次のように設定します

style={[styles.textContainer, {bottom: this.moveAnim, opacity: this.opacityAnim}]}

そして、componentDidMount を変更します

componentDidMount() {
    Animated.timing(
      this.moveAnim,
      {
        toValue: height / 8,
        duration: 80,
        easing: Easing.ease
      },
    ).start(this.timingDismiss);
    Animated.timing(
      this.opacityAnim,
      {
        toValue: 1,
        duration: 100,
        easing: Easing.linear
      },
    ).start();
  }

つまり、一番下が表示されるとき、高さ/12 から高さ/8 に移動し、時間は 80 ミリ秒です。透明度変更の実行時間は 0 から 1 100 ミリ秒です。上では、アニメーション実行のカーブ速度を渡すイージング属性があることがわかります。イージング API にはさまざまな効果があります。自分で実装したい場合は、ソース コードのアドレスは https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js です。計算機能を付けて、自分で見て真似することもできます。

表示時間を定義します

先ほど、表示時間をカスタマイズしてタイプ番号を制限しました

time: PropTypes.number

コンストラクターでの時間の処理

time: props.time && props.time < 1500 ? Toast.SHORT : Toast.LONG,

時間表示を SHORT と LONG の 2 つの値に加工しました。もちろん、自分で希望の効果に加工することもできます。

その後、timingDismiss の時刻 1000 を変更して this.state.time として書き込むだけです。

コンポーネントの更新

コンポーネントが既に存在するときにプロパティが再度更新される場合、これを処理し、状態内のメッセージと時間を更新し、タイマーをクリアして時間を再調整する必要があります。

componentWillReceiveProps(nextProps) {
   this.setState({
      message: nextProps.message !== undefined ? nextProps.message : '',
      time: nextProps.time && nextProps.time < 1500 ? Toast.SHORT : Toast.LONG,
    })
    clearTimeout(this.dismissHandler)
    this.timingDismiss()
  }

コンポーネントの登録

定義したコンポーネントをrenderメソッドに記述するのではなくAPIの形式で呼び出すために、フォローコンポーネントを定義します

import React, {Component} from "react";
import {StyleSheet, AppRegistry, View, Text} from 'react-native';
viewRoot = null;
class RootView extends Component {
  constructor(props) {
    super(props);
    console.log("constructor:setToast")
    viewRoot = this;
    this.state = {
      view: null,
    }
  }

  render() {
    console.log("RootView");
    return (<View style={styles.rootView} pointerEvents="box-none">
      {this.state.view}
    </View>)
  }
  static setView = (view) => {
//此处不能使用this.setState
    viewRoot.setState({view: view})
  };
}

const originRegister = AppRegistry.registerComponent;
AppRegistry.registerComponent = (appKey, component) => {
  return originRegister(appKey, function () {
    const OriginAppComponent = component();
    return class extends Component {

      render() {
        return (
          <View style={styles.container}>
            <OriginAppComponent/>
            <RootView/>
          </View>
        );
      };
    };
  });
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: &#39;relative&#39;,
  },
  rootView: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    flexDirection: "row",
    justifyContent: "center",
  }
});
export default RootView

RootViewはルートです私たちの定義 上記のように実装されたコンポーネントは、AppRegistry.registerComponent を通じて登録されます。

外部呼び出しのパッケージ化

import React, {
  Component,
} from 'react';
import RootView from '../RootView'
import ToastView from './ToastView'
class Toast {
  static LONG = 2000;
  static SHORT = 1000;

  static show(msg) {
    RootView.setView(<ToastView
      message={msg}
      onDismiss={() => {
        RootView.setView()
      }}/>)
  }

  static show(msg, time) {
    RootView.setView(<ToastView
      message={msg}
      time={time}
      onDismiss={() => {
        RootView.setView()
      }}/>)
  }
}
export default Toast

Toast には 2 つの静的変数が定義されており、外部で使用するための表示時間を示します。次に、2 つの静的メソッドを提供します。このメソッドでは、RootView の setView メソッドを呼び出して、ToastView をルート ビューに設定します。

を使用して、まず上記の Toast をインポートし、次に次のメソッドを通じて

Toast.show("测试,我是Toast");
          //能设置显示时间的Toast
          Toast.show("测试",Toast.LONG);

を呼び出します。 関連する推奨事項:

トースト コンポーネントを使用して、ユーザーに入力を忘れないようにする機能を実装します。ユーザー名またはパスワード

WeChatアプレット カスタムトースト実装方法の詳細説明

WeChatミニプログラムのカスタムトースト例の詳細な説明

以上がReactNative で Toast を実装した例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。