React native Expo/React本机选项卡视图在状态更改时重新呈现组件/选项卡

我正在使用Expo React原生框架编写一个应用程序。每当组件的状态使用setState更改时。。。方法，组件应重新渲染以显示最新的状态数据。这适用于基本的React本机组件，如视图、文本和按钮。我已经尝试了这三种组件，但在这里它不会重新呈现，我使用自定义组件选项卡视图。这在有关组件的文档中有说明：

使用SceneMap渲染的所有场景都使用React.PureComponent进行了优化，并且在父对象的道具或状态更改时不重新渲染。如果您需要更多地控制场景更新的方式，例如，即使导航状态没有更改，也会触发重新渲染，请直接使用renderScene，而不是使用SceneMap

我不太明白如何处理这件事。在本例中，我希望在单击按钮并调用函数writeData之后，每当状态发生更改时，组件都会重新渲染

选项卡视图组件的文档位于以下位置：

}

---

我花了几个小时试图实现这一点，但没有解决办法。这是我的第一个StackOverflow问题，谢谢。

触发TabView重新呈现的两种状态是：

指数 路线 他们这样做是为了性能优化

如果要在更改与这些值无关的任何其他状态值时强制重新呈现选项卡视图。。。然后根据文件。。。您需要为renderScene提供自己的实现，如：

renderScene={route，jumpTo}=>{ 交换路由密钥{ 案例“音乐”： 回来 案例“相册”： 回来 } };

在这种情况下：

您需要确保您的各个路线实现 应更新组件以提高性能

---

好吧，我终于想出了一个好办法。要点是将单独文件中各个选项卡/路由的内容定义为具有自身状态的典型React本机组件，而不是在MyTabView组件中，因为即使在关于TabView的文档中的示例中也会这样做。然后，它就可以正常工作了

简单的例子： 这是其中一个选项卡的内容：

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

export default class MyExampleTab extends React.Component {
state = {
    property: "Default value",
}

writeData = () => {
    this.setState({
        property: "Updated value"
   })
}

render() {
    return (
        <View>
            <Button
            style={{ margin: 5 }}
            onPress={this.writeData}
            title="Change the state and re-render!"
            color="#841584"
            />
            <Text>Value of state property: {this.state.property}</Text>
        </View>
    )
}
}

这是我在MyTabView组件中引用它的方式：

 import MyExampleTab from './MyExampleTab'
 ...
 export default class MyTabView extends React.Component {
 ...
       render() {
           return (
              <TabView
                  navigationState={this.state}
                  renderScene={SceneMap({
                       ...
                       someKey: MyExampleTab,
                       ...
                  })}
                  onIndexChange={index => this.setState({ index })}
                  initialLayout={{ width: Dimensions.get('window').width }}
              />
         )

---

所以我不会像通常使用自定义组件那样使用MyExampleTab，而是按原样编写它。这很有道理。然后在按钮上单击“状态更改”和“重新渲染”选项卡

在@druskacik上面写的基础上，您实际上也可以通过道具传递组件

import MyExampleTab from './MyExampleTab'
 ...
 export default class MyTabView extends React.Component {
 ...
       render() {
           return (
              <TabView
                  navigationState={this.state}
                  renderScene={SceneMap({
                       ...
                       someKey:() => <MyExample foo={foodata} />,
                       ...
                  })}
                  onIndexChange={index => this.setState({ index })}
                  initialLayout={{ width: Dimensions.get('window').width }}
              />
         )

---

如果要在每次状态更改时强制重新渲染，则需要为renderScene提供自己的实现。。。因为他们提供的SceneMap是一个PureComponent，当家长的道具或状态发生变化时不会重新渲染。你有什么想法/提示如何实现这个自己的实现吗？请查看答案plzOkay，我找到了一个不同的解决方案，但感谢你解释一下。是的，我正在写：如果我只是想重新播放的内容作为我的场景的一部分，但在这种情况下不一定是选项卡式视图，那该怎么办呢？我如何通过这种方式传递porps？

import MyExampleTab from './MyExampleTab'
 ...
 export default class MyTabView extends React.Component {
 ...
       render() {
           return (
              <TabView
                  navigationState={this.state}
                  renderScene={SceneMap({
                       ...
                       someKey:() => <MyExample foo={foodata} />,
                       ...
                  })}
                  onIndexChange={index => this.setState({ index })}
                  initialLayout={{ width: Dimensions.get('window').width }}
              />
         )