如何在本机反应中编写自定义闪存消息答案

【问题标题】：How to write Custom flash message in react native如何在本机反应中编写自定义闪存消息
【发布时间】：2020-02-27 08:52:07
【问题描述】：

当 recordUpdateSuccess 的布尔值变为 true 并且 3 秒后它应该消失时，我想在成功更新记录后显示一条自定义消息。

{recordUpdateSuccess ? this.renderRecordUpdatedSucess() : null}

我有显示消息的功能：

  renderRecordUpdatedSucess = () => (
    <View style={styles.sucessAlert}>
      <Text style={styles.sucessAlert}>Record updated successfully.</Text>
    </View>
  )

我尝试使用 setTimeout() 来显示消息但不起作用。任何实现这一目标的想法。我不想使用 Toast，任何第三方库都可以。

【问题讨论】：

显示完整组件，你确定 recordUpdateSuccess 是真的吗？
请添加完整代码！
@Borjante Yes recordUpdateSuccess true 并显示消息，但我想在几秒钟后将其消失，所以我输入 setTimeout(()=>{ this.setState({recordUpdateSuccess: false}) },3000)
完整代码请@RaviSharma

标签： react-native settimeout flash-message

【解决方案1】：

自定义 Flash 消息（无外部库）工作示例：https://snack.expo.io/@msbot01/1dcddc

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity  } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     flashMessage: false
    }
  }

  onPress(){
    this.setState({
      flashMessage: true
    },()=>{setTimeout(() => this.closeFlashMessage(), 3000)})
  }

  closeFlashMessage(){
    this.setState({
      flashMessage: false
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>{this.onPress()}}>
          <Text>Click Me</Text>
        </TouchableOpacity >
        {this.state.flashMessage==true?
          <View style={styles.flashMessage}>
          <Text style={{color:'white'}}>This is custom Flash message</Text>
        </View>
        :
        null
        }

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  flashMessage:{
    position:'absolute', 
    backgroundColor:'green', 
    width:'100%', 
    justifyContent:'center', 
    alignItems:'center',           
    height:40, 
    top:0
  }
});

【讨论】：