react-native - Expo/React Native TabView 在状态改变时重新渲染组件/标签

Question

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

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

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

TabView 组件的文档在这里: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 问题，谢谢。

Answer 1

好吧，我终于想出了一个不错的解决方案。重点是在单独的文件中将各个选项卡/路由的内容定义为具有自己状态的典型 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 .这很有道理。然后在按钮上单击状态更改和选项卡重新呈现。