Question

我正在开发一个基本上应该处理一些后端工作然后再推送另一个屏幕的页面。

当页面呈现“提交您的信息”然后执行后端调用，然后文本消失，然后整个页面执行推送到另一个屏幕时，此页面应该会出现一些文本。

我很困惑怎么做!!

这是页面的渲染部分

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

我知道它与settimeout有关吗？还是间隔？

对不起，我是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更新状态，而在想要将用户推送到另一个屏幕时再次隐藏它。

在React Native中显示/隐藏文本，超时，渐变

1 个答案: