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를 가져오고 사용자 정의 구성 요소는 이를 상속해야 하며 Dimensions는 애니메이션을 구현하는 데 사용되고 Easing은 궤적을 설정하는 데 사용됩니다. 애니메이션 Running 효과의 PropTypes는 속성 유형을 정의하는 데 사용됩니다.

render 메소드는 컴포넌트 렌더링을 정의하는 진입점입니다. 가장 바깥쪽 뷰는 위치를 절대값으로 사용하고 왼쪽, 오른쪽, 위쪽 및 아래쪽을 0으로 설정하여 화면을 채웁니다. 토스트 표시 이벤트 중에는 클릭을 모니터링할 수 없습니다. 내부 View는 Toast가 표시하는 검정색 프레임 컨테이너입니다. backgroundColor 속성은 rgba 형식으로 설정되어 있으며 색상은 검정색이고 투명도는 0.6입니다. 둥근 모서리와 최대 너비를 화면 너비의 절반으로 설정합니다. 그런 다음 텍스트 구성 요소를 사용하여 특정 프롬프트 정보를 표시합니다.

또한 속성 메시지 유형을 문자열로 제한하는 데 propTypes가 사용되는 것을 볼 수 있습니다. 생성자는 구성 요소의 구성 방법으로 전달되는 일부 속성인 props 매개 변수를 갖습니다. 생성자에서 super(props)를 먼저 호출해야 합니다. 그렇지 않으면 오류가 보고됩니다. 여기서는 전달된 값을 상태로 설정합니다.

Toast의 경우 잠시 후에 표시가 자동으로 사라집니다. 이 효과는 setTimeout을 통해 얻을 수 있습니다. 여기서 시간은 1000ms로 설정됩니다. 그러면 숨겨진 파괴가 드러납니다. setTimeout을 사용하면 구성 요소가 언로드될 때 타이머도 지워야 합니다. componentWillUnmount는 구성 요소가 마운트 해제될 때 콜백됩니다. 그러니 여기서 타이머를 지워보세요.

애니메이션 효과 구현

위의 토스트 효과를 구현했지만 표시 및 숨기기가 지나치게 애니메이션되지 않아 약간 딱딱합니다. 그런 다음 번역 및 투명도 애니메이션을 추가한 다음 애니메이션 효과를 얻기 위해 componentDidMount를 수정합니다

컴포넌트에 두 개의 변수를 추가합니다

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로 이동하고 시간은 80ms이며, 투명도 실행 시간은 0에서 1 100ms로 변경됩니다. 위에서는 애니메이션 실행의 곡선 속도를 전달하는 easing 속성을 볼 수 있습니다. Easing API에는 다양한 효과가 있습니다. 구현 내용을 직접 확인하실 수 있습니다. 소스 코드 주소는 https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js 입니다. 직접 구현해 보시기 바랍니다. 계산 기능을 제공하여 직접 보고 따라해 볼 수 있습니다.

표시 시간 정의

앞서 토스트 표시를 1000ms로 설정했습니다. 표시 시간을 사용자 정의하고 유형 번호를 제한했습니다.

time: PropTypes.number

생성자에서 시간 처리

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

시간 표시를 SHORT와 LONG 두 가지 값으로 처리했습니다. 물론 원하는 효과로 직접 처리할 수도 있습니다.

그러면 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()
  }

컴포넌트 등록

우리가 정의한 컴포넌트가 렌더 메소드로 작성되지 않고 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에는 외부 사용을 위해 표시되는 시간을 나타내는 두 개의 정적 변수가 정의되어 있습니다. 그런 다음 RootView의 setView 메서드가 호출되어 ToastView를 루트 보기로 설정하는 두 가지 정적 메서드를 제공합니다.

를 사용하여 위의 Toast를 먼저 가져온 후 다음 방법을 통해

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

를 호출합니다. 관련 권장 사항:

toast 구성 요소를 사용하여 사용자에게 입력을 잊어버리도록 요청하는 기능을 구현합니다. 사용자 이름 또는 비밀번호

WeChat 애플릿 맞춤 토스트 구현 방법에 대한 자세한 설명

WeChat 애플릿의 맞춤 토스트 인스턴스에 대한 자세한 설명

위 내용은 ReactNative에서 Toast 구현 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!