Expo/React Native TabView 在状态更改时重新渲染组件/选项卡

我正在使用 Expo（React Native 框架）编写一个应用程序。每当使用 setState(...) 方法更改组件的状态时，组件应该重新渲染以显示最新的状态数据。这适用于基本的 React Native 组件，例如 View、Text、Button（我已经尝试过这三个），但它不会在这里重新渲染，我使用自定义组件 TabView。关于组件的文档中对此进行了说明：

“使用 SceneMap 渲染的所有场景都使用 React.PureComponent 进行了优化，并且当父级的 props 或状态更改时不会重新渲染。如果您需要更多地控制场景的更新方式（例如 - 触发重新渲染，即使 navigationState 没有不改变），直接使用renderScene而不是使用SceneMap。”

我不太明白如何管理这个。我希望组件在状态更改时重新渲染，在本例中是在单击按钮并调用函数 writeData() 之后。

TabView 组件的文档在这里：https://github.com/react-native-community/react-native-tab-view https://github.com/react-native-community/react-native-tab-view .

import React from 'react';
import { TabView, SceneMap } from 'react-native-tab-view';

import { StyleSheet, Text, View, Dimensions, Button, ToastAndroid } from 'react-native';

export default class MojTabView extends React.Component {
state = {
    index: 0,
    routes: [
      { key: 'allEvents', title: 'Všetko' },
      { key: 'sortedEvents', title: 'Podľa druhu' },
      { key: 'myEvents', title: 'Moje akcie'}
    ],
    name: "Robert"
  };

MyEvents = () => (
    <View style={[styles.scene, { backgroundColor: 'white' }]}>
        <Text>Some content</Text>
        <Button
          style={{ margin: 5 }}
          onPress={this.writeData}
          title="Write data"
          color="#841584"
        />
        <Text>Name in state: {this.state.name}</Text>
    </View>
  );

SortedEvents = () => (
      <Text>Some content</Text>
);

AllEvents = () => (
     <Text>Some other content</Text>
);

writeData = () => {
  ToastAndroid.show("button click works!", ToastAndroid.LONG);
  this.setState({ name: "Richard"});

}
render() {
    return (
        <TabView
          navigationState={this.state}
          renderScene={SceneMap({
              allEvents: this.AllEvents,
              myEvents: this.MyEvents,
              sortedEvents: this.SortedEvents
          })}
          onIndexChange={index => this.setState({ index })}
          initialLayout={{ width: Dimensions.get('window').width }}
        />
    );
}

}

我花了几个小时试图实现这一目标，但没有解决方案。这是我的第一个 StackOverflow 问题，谢谢。

好吧，我终于想出了一个很好的解决方案。重点是将单独文件中各个选项卡/路由的内容定义为具有自己状态的典型 React Native 组件，而不是在此 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 />，就像我通常使用自定义组件一样，但按原样编写，MyExampleTab。这很有道理。在按钮上单击状态更改并重新呈现选项卡。