在 React Native 中重新渲染不同的选项卡

Question

我正在构建一个带有多个选项卡的 React Native 应用程序。每个选项卡呈现来自 API 调用的数据：

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  TabBarIOS,
  Text,
  View,
  NavigatorIOS,
} = React;

// Load up tab pages
var Home = require('./Home');
var Appointments = require('./Appointments');
var Clients = require('./Clients');
var EmailMarketing = require('./EmailMarketing');
var Analytics = require('./Analytics');
var AddClient = require('./AddClient');

var Icon = require('react-native-vector-icons/Ionicons');

var TabBar = React.createClass({
  getInitialState() {
    return {
      selectedTab: 'home',
    };
  },
  render() {

      return (
        <TabBarIOS ref="tabBar" selectedTab={this.state.selectedTab}>
          <Icon.TabBarItem
            title="Home"
            selected={this.state.selectedTab === 'home'}
            iconName="ios-home-outline"
            selectedIconName="ios-home"
            onPress={() => {
              if (this.state.selectedTab !== 'home') {
                this.setState({
                  selectedTab: 'home'
                });
              } else if (this.state.selectedTab === 'home') {
                this.refs.homeRef.popToTop();
              }


            }}
            >
            <NavigatorIOS
              style={styles.container}
              ref='homeRef'
              initialRoute={{
                title: 'Home',
                component: Home
              }} />
          </Icon.TabBarItem>

          <Icon.TabBarItem
            title="Appointments"
            selected={this.state.selectedTab === 'appointments'}
            iconName="ios-calendar-outline"
            selectedIconName="ios-calendar"
            onPress={() => {
              if (this.state.selectedTab !== 'appointments') {
                this.setState({
                  selectedTab: 'appointments'
                });
              } else if (this.state.selectedTab === 'appointments') {
                this.refs.appointmentsRef.popToTop();
              }
            }}
            >
            <NavigatorIOS
              style={styles.container}
              ref='appointmentsRef'
              initialRoute={{
                title: 'Appointments',
                component: Appointments
              }} />
          </Icon.TabBarItem>

          <Icon.TabBarItem
            title="Clients"
            selected={this.state.selectedTab === 'clients'}
            iconName="ios-people-outline"
            selectedIconName="ios-people"
            onPress={() => {
              if (this.state.selectedTab !== 'clients') {
                this.setState({
                  selectedTab: 'clients'
                });
              } else if (this.state.selectedTab === 'clients') {
                this.refs.clientsRef.popToTop();
              }
            }}
            >
            <NavigatorIOS
              style={styles.container}
              ref='clientsRef'
              initialRoute={{
                rightButtonTitle: 'Add Client',
                onRightButtonPress: () => {
                  this.refs.clientsRef.navigator.push({
                    title: "Add Client",
                    component: AddClient
                  });
                },
                title: 'My Clients',
                component: Clients
              }} />
          </Icon.TabBarItem>

          <Icon.TabBarItem
            title="Email Marketing"
            selected={this.state.selectedTab === 'emailMarketing'}
            iconName="ios-email-outline"
            selectedIconName="ios-email"
            onPress={() => {
              if (this.state.selectedTab !== 'emailMarketing') {
                this.setState({
                  selectedTab: 'emailMarketing'
                });
              } else if (this.state.selectedTab === 'emailMarketing') {
                this.refs.emailMarketingRef.popToTop();
              }
            }}
            >
            <NavigatorIOS
              style={styles.container}
              ref='emailMarketingRef'
              initialRoute={{
                title: 'Email Marketer',
                component: EmailMarketing
              }} />
          </Icon.TabBarItem>

          <Icon.TabBarItem
            title="Analytics"
            selected={this.state.selectedTab === 'analytics'}
            iconName="ios-pie-outline"
            selectedIconName="ios-pie"
            onPress={() => {
              if (this.state.selectedTab !== 'analytics') {
                this.setState({
                  selectedTab: 'analytics'
                });
              } else if (this.state.selectedTab === 'analytics') {
                this.refs.analyticsRef.popToTop();
              }
            }}
            >
            <NavigatorIOS
              style={styles.container}
              ref='analyticsRef'
              initialRoute={{
                title: 'Analytics',
                component: Analytics
              }} />
          </Icon.TabBarItem>
        </TabBarIOS>
      );
    },
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#123456',
  },
})



module.exports = TabBar;

我遇到的问题是，如果用户决定更改或修改一个选项卡中的数据（例如，如果他们将 'client' 添加到他们的客户列表中）他们应该能够看到由于 API 调用（例如，在客户索引中），其他选项卡中的更改。我发现的是，在不同选项卡之间来回切换似乎不会触发重新呈现的状态，因此 API 被再次调用 - 结果，它只显示来自最后 API 次通话。处理这个问题的最佳方法是什么？

Answer 1

您的组件之间需要某种共享状态。尝试 redux 或其他一些通量实现。

在 React Native 中重新渲染不同的选项卡

Rerender different tabs in React Native

javascript

tabbar

reactjs

react-native