Question

我在BottomTabNavigator中有5个屏幕，其中一个列出了在数据库中检索到的一些数据，另一个用于将新数据保存在同一数据库中。当我导航回到列出数据的屏幕（如果已经加载）时，由于屏幕已被加载，因此不会使用新数据进行更新。每当我按下选项卡按钮之一时，是否可以重新加载组件？预先谢谢你。

boost::interprocess

TabNavigator = createBottomTabNavigator({
        Descriptif,
        Chrono,
        Session: { screen: () => <Session myPath={this.state.myPath} /> },
        Resultats: { screen: ({ navigation }) => <Resultats navigation={navigation} myPath={this.state.myPath} /> },
        Edit: { screen: () => <Edit myPath={this.state.myPath} /> }
    }, {
            defaultNavigationOptions: ({ navigation }) => ({
                tabBarIcon: ({ tintColor }) => {
                    const { routeName } = navigation.state;
                    let IconComponent = Ionicons;
                    let iconName;
                    if (routeName === 'Descriptif') {
                        iconName = 'md-fitness';
                    } else if (routeName === 'Chrono') {
                        iconName = 'md-time';
                    } else if (routeName === 'Session') {
                        iconName = 'md-save';
                    } else if (routeName === 'Resultats') {
                        iconName = 'md-analytics';
                    } else if (routeName === 'Edit') {
                        iconName = 'md-cut';
                    }
                    return <IconComponent name={iconName} size={25} color={tintColor} />;
                },
            }),
            tabBarOptions: {
                activeTintColor: 'red',
                inactiveTintColor: 'gray',
            },
        })

Answer 1

使用NavigationEvents。将事件侦听器添加到列表数据组件。

onWillFocus-事件监听器

onDidFocus-事件监听器

onWillBlur-事件侦听器

onDidBlur-事件侦听器

例如，当聚焦列表数据屏幕时，将触发以下内容。

class App extends Component {

  focusSubscription = null;

  onWillFocus = payload => {
   // call a function to reload data here
  };

componentDidMount = () => {
  this.focusSubscription = this.props.navigation.addListener(
    'willFocus',
    this.onWillFocus
  );
};

componentWillUnmount = () => {
  this.focusSubscription && this.focusSubscription.remove();
  this.focusSubscription = null;
};

将导航传递给您的组件，例如

Resultats: { screen: ({ navigation }) => <Resultats navigation={navigation} myPath={this.state.myPath} /> },

或在父视图中将NavigationEvents添加到渲染中，而无需通过导航作为道具。

import {
   ...
   NavigationEvents,
 } from 'react-navigation';

class Resultats extends Component {
 ...
onWillFocus = payload => {
    console.log('didBlur', payload);
    this.readData(); // my method 
};

....
  render() {
    ...
    return (
      <View>
        <NavigationEvents
          onDidFocus={payload => this.onWillFocus(payload)}
        />
        {/* 
         Your view code
        */}
      </View>
    )
  }

如何重新加载已经在BottomTabNavigator中加载的屏幕？

1 个答案: