リアクションナビで前のページに戻るときに戻る

Question

スタックナビゲータを使用して戻るときに前のページを更新するにはどうすればよいですか？私が戻ってきたページでライフサイクルフックは起動していないようです。私はちょうど基本的な例を使用していますthis.props.navigation.goBack()

Answer 1

私はredditで答えを見つけました。 https://www.reddit.com/r/reactnative/comments/69xm4p/react_navigation_tab_change_event/

私はhooonkos onNavigationStateChangeメソッドを使用して、彼が下で作成した例をうまく貼り付けていません。私はすべてのクレジットがhooonkoに行くべきこの解決策を思い付かなかった。

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import { TabNavigator } from 'react-navigation'; 
import Icon from 'react-native-vector-icons/FontAwesome'; 


class MyHomeScreen extends React.Component { 
    static navigationOptions = { 
    tabBarLabel: 'Home', 
    // Note: By default the icon is only shown on iOS. Search the showIcon option below. 
    tabBarIcon: ({ tintColor }) => (
     <Icon 
     name="home" 
     size={30} 
     color={tintColor} 
     /> 
    ), 
    }; 

    _myHomeFunction =() => { 
    alert('Here is home tab!'); 
    } 

    componentWillReceiveProps(newProps) { 
    if (newProps.screenProps.route_index === 0) { 
     this._myHomeFunction(); 
    } 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.text}> 
      Home 
     </Text> 
     </View> 
    ); 
    } 
} 

class MyRocketScreen extends React.Component { 
    static navigationOptions = { 
    tabBarLabel: 'Rocket', 
    tabBarIcon: ({ tintColor }) => (
     <Icon 
     name="rocket" 
     size={30} 
     color={tintColor} 
     /> 
    ), 
    }; 

    _myRocketFunction =() => { 
    alert('Here is rocket tab!'); 
    } 

    componentWillReceiveProps(newProps) { 
    if (newProps.screenProps.route_index === 1) { 
     this._myRocketFunction(); 
    } 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.text}> 
      Rocket 
     </Text> 
     </View> 
    ); 
    } 
} 

const MyApp = TabNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    Rocket: { 
    screen: MyRocketScreen, 
    }, 
}, { 
    tabBarOptions: { 
    activeTintColor: '#e91e63', 
    }, 
}); 

class rn extends Component { 
    _onNavigationStateChange = (prevState, newState) => { 
    this.setState({...this.state, route_index: newState.index}); 
    } 
    render() { 
    return (
     <MyApp onNavigationStateChange={this._onNavigationStateChange} screenProps={this.state} /> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    text: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
}); 

AppRegistry.registerComponent('rn',() => rn);