react - native - root - toast 사용

앤 리 에 게 ios 와 android 에서 통용 할 수 있 는 Toast 구성 요 소 를 드 리 겠 습 니 다. react - native - root - toast 가 현재 시작 하 는 Toast 구성 요소 가 많 습 니 다. 왜 이 걸 선택 하 셨 습 니까?이 유 는 다음 과 같다.

순수 javascript 솔 루 션 은 원생 설치 의 각종 복잡 한 절 차 를 면제 하고 직접 한 줄 npm install react-native-root-toast --save 로 해결

과 iOS 를 동시에 호 환 하고 완전히 일치 하 는 인 터 페 이 스 를 사용 하 며 두 플랫폼 을 동시에 호 환 하기 위해 추가 코드

를 쓰 지 않 아 도 됩 니 다.

사용자 정의 Android 의 각종 속성 (표시 시간, 위치, 지연, 애니메이션, 그림자 등)

두 가지 호출 형식 toast 을 동시에 지원 합 니 다. API 으로 직접 Component 에 넣 어 제어 할 수도 있 습 니 다.

설치 하 다.

npm install [React](http://lib.csdn.net/base/react)-native-root-toast --save

해결!
쓰다
두 가지 다른 호출 방식 을 지원 할 수 있 습 니 다.
하면, 만약, 만약...

import Toast from 'react-native-root-toast'; //     

//      Toast.show(message, options);           toast，     toast  
let toast = Toast.show('This is a message', {
    duration: Toast.durations.LONG, // toast    
    position: Toast.positions.BOTTOM, // toast  
    shadow: true, // toast      
    animation: true, // toast  /               
    hideOnPress: true, //            toast    
    delay: 0, // toast     
    onShow: () => { 
        // toast    （     ）
    },
    onShown: () => {
        // toast    （     ）
    },
    onHide: () => {
        // toast    （     ）
    },
    onHidden: () => {
        // toast    （     ）
    }
});

//        Toast.hide(toast);     toast  
setTimeout(function () {
    Toast.hide(toast);
}, 500);

또한 react 구성 요 소 를 통 해 Toast 를 호출 할 수 있 습 니 다. render 에 render 구성 요 소 를 추가 하고 속성 을 통 해 visible 제어 할 수 있 습 니 다. Toast 의 속성 은 호출 시 들 어 오 는 옵션 과 같 습 니 다. API 내용 은 요소 내부 에 추 가 됩 니 다. toast메모: 구성 요소 방식 으로 호출 된 message 구성 요소 toast 가 자동 으로 사라 집 니 다.

import React, {Component} from 'react-native';
import Toast from 'react-native-root-toast';

class Example extends Component{
    constructor() {
        super(...arguments);
        this.state = {
            visible: false
        };
    }

    componentDidMount() {
        setTimeout(() => this.setState({
            visible: true
        }), 2000); // show toast after 2s

        setTimeout(() => this.setState({
            visible: false
        }), 5000); // hide toast after 5s
    };

    render() {
        return This is a message;
    }
}

잘못 신고 수정 방법: 원본 파일 lib / tost Container. js 에서 코드 변경

componentWillUnmount = () => {
   this._root&&this._hide();
};

참고:http://blog.csdn.net/sinat_17775997/article/details/60954255 https://github.com/magicismight/react-native-root-toast/issues/24