react native简单的toast

import React from "react";
import { Text, View, StyleSheet, Image, TextInput ,TouchableOpacity} from "react-native";
import {EasyLoading, Loading} from "../../commponts/loading/index";

import {EasyToast,Toast}  from "../../commponts/toast/index";
const Index = () => {
  const login=()=>{
    EasyToast.show('请输入账号密码',2000);
  }

  return (
    <View>
      <View style={[styles.container]}>
        <Text style={styles.title}>麦探app</Text>

        <View style={styles.phone}>
          <Image source={require('../../assets/img/phone.png')} style={{width:20,height:40}} />
          <TextInput style={styles.textInputStyle} placeholder={'输入账号'}></TextInput>
        </View>
        <View style={styles.phone}>
          <Image source={require('../../assets/img/lock.png')} style={{width:20,height:40}} />
          <TextInput style={styles.textInputStyle} placeholder={'输入密码'}></TextInput>
        </View>
        <Loading/>

        <TouchableOpacity style={styles.btn} activeOpacity={0.5} onPress={login}><Text style={styles.btnText}>登录</Text></TouchableOpacity>
      </View>
      <Toast  />
    </View>

  );
};
const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
  },

  message:{
    position:'absolute',
    zIndex:99999,
    backgroundColor:'#6e666a',
    color:'white',
    padding:8,
    borderRadius:10,
  },

  bigBlue: {
    color: "blue",
    fontWeight: "bold",
    fontSize: 30,
  },
  title: {
    marginTop: "20%",
    textAlign: "center",
    fontSize: 40,
    fontFamily: "Fantasy",
    color: "#77cca8",
  },
  //
  phone: {
    width: "80%",
    height: 40,
    flexDirection: "row",
    justifyContent: "center",
    // backgroundColor: "red",
    marginLeft:'10%',
    marginTop:30,
    alignItems: "center",
    borderStyle:'Solid',
    borderBottomWidth:2,
    borderBottomColor:'#cdcdcd'
  },
  textInputStyle: {
    // 设置尺寸
    width: "90%",
    height: 40,
    // 设置背景颜色
    alignItems: "center",
  },
  btn:{
    width:'80%',
    height:50,
    marginLeft:'10%',
    marginTop:50,
    borderRadius:20,
    backgroundColor:'#77cca8',
    alignItems:'center',
    justifyContent:'center',
    color:"#77cca8",

  },
  btnText:{
    color:'white',
    textAlign:'center'

  }
});
export default Index;

引入
并使用

import React from "react";
import { Text, View, StyleSheet, Image, TextInput ,TouchableOpacity} from "react-native";
import {EasyLoading, Loading} from "../../commponts/loading/index";

import {EasyToast,Toast}  from "../../commponts/toast/index";
const Index = () => {
  const login=()=>{
    EasyToast.show('请输入账号密码',2000);
  }

  return (
    <View>
      <View style={[styles.container]}>
        <TouchableOpacity style={styles.btn} activeOpacity={0.5} onPress={login}><Text style={styles.btnText}>登录</Text></TouchableOpacity>
      </View>
      <Toast  />
    </View>

  );
};

 <Toast  />