Reactでテキストを表示/非表示ネイティブ、タイムアウト、グラデーション

Question

私は基本的にいくつかのバックエンドの作業を処理してから、別の画面を押すことになっているページで作業しています。

このページは、ページのレンダリング（「情報の送信」）、バックエンド呼び出しを行った後、テキストが消えてから、ページ全体が別の画面のプッシュを実行するとすぐに表示されるはずです。

私はそれを行う方法が混乱しています！

これは私がのsetTimeoutを行うための何かを知っているページ

render(){ 
return(
    <View style={styles.container}> 
    <Image style={styles.container} resizeMode="cover" source= 
{require('/workingonit.png')}> 
     <View style={styles.backdropView}> 
     <Text style={styles.headline}>Submitting your info</Text> 
     </View> 
    </Image>       
    </View> 
) 
} 

の一部をレンダリングしているのですか？または間隔？

申し訳ありません。私はJSに新しく、ネイティブに反応します。

Answer 1

この例では、状態を更新してTouchableOpacityをクリックするたびにテキストを表示/非表示にします。その後、状態が更新されたときにコールバックとして必要なロジックを追加できます。

import React from 'react' 
import { View, Text, TouchableOpacity } from 'react-native' 

export default class DummyPage extends React.Component { 
    state = { 
    isTextVisible: false 
    } 

    toggleText() { 
    this.setState({isTextVisible: !this.state.isTextVisible},() => { 
     // do some logic here 
    }) 
    } 

    renderText() { 
    if (this.state.isTextVisible) { 
     return(
     <Text>this is a random text</Text> 
    ) 
    } 
    } 

    render() { 
    return(
     <View style={{flex: 1}}> 
     <TouchableOpacity onPress={this.toggleText}> 
      <Text>Show Text</Text> 
     </TouchableOpacity> 
     {this.renderText()} 
     </View> 
    ) 
    } 
} 

これはAPI呼び出しにも有効です。 onPressで状態を更新するのではなく、バックエンドとの通信が開始されたときにそれを行うことができ、ユーザーを別の画面にプッシュしたいときに再び隠すことができます。