时间戳

首页 > 解决方案 > 当我离开并返回选项卡时，我的列表组件消失了

react-native - 当我离开并返回选项卡时，我的列表组件消失了

问题描述

我正在为我的 React Native 应用程序使用 React Navigation v2，并且正在使用选项卡导航器。主选项卡（帖子的提要）在第一次渲染时看起来像这样。选择其他两个选项卡之一，然后导航回我的主选项卡后，它看起来像这样。出于某种原因，输入栏呈现得很好，但列表消失了，直到我再次发布。然后提要列表（包括新帖子）将出现在屏幕上。

在 componentDidMount() 生命周期方法中，我调用了一个名为 fetchFeed() 的操作，它从 firebase 数据库中提取所有提要数据并将其保存到 state（然后使用 redux 映射到 props）。renderFeed() 方法在 render() 方法中被调用，并将 feedData 组织在一个 List 组件中（来自 nativebase）。

我不确定为什么输入栏在列表没有呈现时呈现，但我假设我需要触发一些状态更改，比如当我导航回主选项卡时再次调用 fetchFeed() 方法.

到目前为止，我已经尝试使用 React Navigation 中的 navigationEvents 功能在用户导航回来时运行一个方法，但甚至只是尝试使用此功能进行控制台日志，如下所示：

<NavigationEvents
  onWillFocus={payload => {
  console.log("will focus", payload);
  }}
/>

抛出错误：“元素类型无效：需要一个字符串......”

我不知道接下来要尝试什么...我非常感谢您提供的任何帮助/建议！代码如下：

class FeedScreen extends Component {
  static navigationOptions = {
      title: 'Announcements',
      headerStyle: {
        backgroundColor: '#ff0000',
      },
      headerTintColor: '#fff',
    };

  componentDidMount() {
    this.props.fetchFeed(this.props.organization);
    this.registerForPushNotifications();
  }

  renderFeed = () => {
    const random = Math.floor((Math.random() * 100) + 1);
    const listKey = `${random}${this.props.loadingList}`;
    if (this.props.loadingList) {
      return <Spinner />;
    } else if (this.props.error) {
      return (<Text>{this.props.error}</Text>);
    } return (
      <List
        key={listKey}
        enableEmptySections
        dataArray={this.props.feedData}
        renderRow={this.renderPost}
        keyExtractor={(post) => post.key}
      />
    );
  }

    .
    .
 //several unrelated methods
    .
    .

    render() {
    return (
      <Container>
        <Content>
          <View style={styles.messageBoxContainer}>
            <Input
              onChangeText={this.props.postChanged.bind(this)}
              value={this.props.postContent}
              style={styles.messageBox}
              multiline
            />
            {this.renderButton()}
          </View>
          {this.renderFeed()}
        </Content>
      </Container>
    );
  }
}

    .
    .
    .
//styles object and mapStateToProps

标签： react-nativereact-navigationexpo

解决方案

这是我为 React Navigation v2 设置willFocus监听器的方法

componentDidMount() {
  this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocus);
}

componentWillUnmount() {
  if (this.willFocusSubscription) {
      this.willFocusSubscription.remove();
  }
}

willFocus = (payload) => {
  // do stuff here 
}

我不确定为什么您的列表消失了。feedData 可以设置为空数组吗？

推荐阅读