如何在 React Native 中编写自定义 Flash 消息

Question

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

{recordUpdateSuccess ? this.renderRecordUpdatedSucess() : null}

我有显示消息的功能：

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

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

Answer 1

自定义即显消息（无外部库）工作示例：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
  }
});

如何在 React Native 中编写自定义 Flash 消息

How to write Custom flash message in react native

settimeout

flash-message

react-native