Как написать Custom FLA sh сообщение в реагировать родной - PullRequest
Новая
       35

Как написать Custom FLA sh сообщение в реагировать родной

0 голосов
/ 27 февраля 2020

Я хочу отображать пользовательское сообщение после успешного обновления записи, когда логическое значение recordUpdateSuccess становится истинным и через 3 секунды оно должно исчезнуть. 

{recordUpdateSuccess ? this.renderRecordUpdatedSucess() : null}

У меня есть функция для отображения сообщения: 

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

Я пытался использовать setTimeout () для отображения сообщения, но не работает. Любая идея, чтобы достичь этого. Я не хочу использовать Toast, любую стороннюю библиотеку для этого.

1 Ответ

2 голосов
/ 27 февраля 2020

Пользовательское сообщение fla sh (без внешней библиотеки) Рабочий пример: https://snack.expo.io/@msbot01 / 1dcdd c

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
  }
});
...