ReactNative를 사용하여 Toast를 구현하는 방법-JS 튜토리얼-php.cn

이 글에서는 주로 ReactNative에서 Toast를 구현하는 예제를 소개하고 있습니다.

Android 개발 엔지니어에게 Toast는 프롬프트 메시지를 표시하고 자동으로 숨기는 데 매우 익숙합니다. RN 애플리케이션을 개발할 때 그런 효과를 내기가 조금 어렵지만 전혀 어렵지 않습니다. RN에서 공식적으로 제공하는 API인 ToastAndroid만 보면 됩니다. . Android에서만 사용할 수 있으며 iOS에서 사용할 때는 효과가 없습니다. 따라서 이를 조정하거나 사용자 정의해야 합니다. 오늘의 기사는 Android와 iOS 모두에서 실행될 수 있도록 Toast를 사용자 정의하는 것입니다. 운영 효과.

소스 코드 포털

구성 요소 정의

import React, {Component} from &#39;react&#39;;
import {
  StyleSheet,
  View,
  Easing,
  Dimensions,
  Text,
  Animated
} from &#39;react-native&#39;;
import PropTypes from &#39;prop-types&#39;;
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 : &#39;&#39;
    }
  }

  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은 애니메이션의 궤적 실행 효과를 설정하는 데 사용됩니다. 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();
  }

로그인 후 복사

를 수정합니다. 즉, 하단이 표시되면 height/12에서 height/8로 이동하고, 시간은 80ms이고, 실행 시간은 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 : &#39;&#39;,
      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 &#39;react-native&#39;;
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 &#39;react&#39;;
import RootView from &#39;../RootView&#39;
import ToastView from &#39;./ToastView&#39;
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);

로그인 후 복사

를 호출하세요. 위의 내용은 나중에 모두에게 도움이 되기를 바랍니다.