Question

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

在componentDidMount（）生命周期方法中，我调用了一个名为fetchFeed（）的操作，该操作从firebase数据库中提取所有提要数据并将其保存到状态（然后通过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

Answer 1

这是我为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设置为空数组吗？

Answer 2

您应该在构造函数中注册推送通知。

请查看此链接，以获取更详细的示例： https://www.pubnub.com/blog/react-native-push-notifications-ios-android/

当我导航离开并返回到选项卡时，列表组件消失

2 个答案: