选择选项卡时重新渲染组件

Question

我正在使用 react-navigation 中的 TabNavigator 来浏览 3 个组件。我的 TabNavigator 组件如下所示：

import routeOnMap from '../screens/routsOnMap.js';
import meditatinWalk from '../screens/meditationWalk.js';
import newWordToWalkOn from '../screens/newWordToWalkOn.js';
import * as firebase from 'firebase';

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

import {
  StackNavigator,
  NavigationActions,
  TabNavigator,
  TabBarBottom,
} from 'react-navigation';

import Ionicons from 'react-native-vector-icons/Ionicons';

export default TabNavigator(
{
  MeditatinWalk: { screen: meditatinWalk },
  NewWordToWalkOn: { screen: newWordToWalkOn },
  RouteOnMap: { screen: routeOnMap },

},
{
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      let iconName;
      if (routeName === 'MeditatinWalk') {
        iconName = `ios-walk${focused ? '' : '-outline'}`;
      } else if (routeName === 'NewWordToWalkOn') {
        iconName = `ios-add-circle${focused ? '' : '-outline'}`;
      } else if (routeName === 'RouteOnMap') {
        iconName = `ios-map${focused ? '' : '-outline'}`;
      }

      // You can return any component that you like here! We usually use an
      // icon component from react-native-vector-icons
      return <Ionicons name={iconName} size={25} color={tintColor} />;
    },
  }),
  tabBarOptions: {
    activeTintColor: '#626A41',
    inactiveTintColor: 'gray',
  },
  tabBarComponent: TabBarBottom,
  tabBarPosition: 'bottom',
  animationEnabled: false,
  swipeEnabled: false,
}
);

我想在 NewWordToWalkOn 组件被按下/按标签时重新渲染它。我想重新渲染的代码是 NewWordToWalkOn 组件中的 componentDidMount() 方法中的内容。

//imports

export default class NewWordToWalkOn extends Component {
constructor() {
 super()
   this.state = {
   words: [],
 };
}

static navigationOptions = ({ navigation }) => ({
 title:
  <Text style={{ fontWeight: 'bold', color: '#626A41'}}> Vælg nye ord at vandre på </Text>,
headerLeft: null,
headerRight:
  <TouchableOpacity
    style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginRight: 10 }}
    onPress={ () => MeditatinWalk._logout() }>
      <Text
        style={{ fontWeight: 'bold', color: '#626A41'}}>
        Log ud
      </Text>
  </TouchableOpacity>
});

 componentDidMount() {
  //code that needs rerendered
 }


render() {

)

return (
  <ScrollView style={styles.wrapper}>
    //all the elements
  </ScrollView>
);
}
}

对如何重新渲染有什么建议吗？

Answer 1

如果您想在按下选项卡时更新视图，请尝试使用this.props.navigation.addListener 订阅导航生命周期事件。

例子：

class NewWordToWalkOn extends Component {
  constructor (props) {
    super(props)
    this.navigationWillFocusListener = props.navigation.addListener('willFocus', () => {
      // do something like this.setState() to update your view
    })
  }
  componentWillUnmount () {
    this.navigationWillFocusListener.remove()
  }
}