StackNavigator的子组件在其父代外调用时呈现两次

Question

我使用React Navigation在我的React Native应用程序中的屏幕之间进行导航。我的屏幕结构是：

- DrawerNavigator  
    - HomeScreen  
    - MoviesStackNavigator  
     - MoviesListScreen  
     - MovieDetailsScreen  
    - DiscoverScreen 

现在我想导航并将DiscoverScreen中的一些参数传递给MoviesListScreen。

这里是我的代码：

DiscoverScreen.js

onSearchConfirm() { 
    this.setState({searching: true}) 


    var params = { 
     sort_by: this.state.sortBy, 
     year: this.state.releaseYear, 
     with_genres: this.state.genreIds.join(',') 
    }; 

    const _this = this; 

    return fetch(Configuration.TMDB_BASE_URL 
       .concat('/discover/movie?') 
       .concat(Utility.stringFromQueryParams({...params, api_key: Configuration.TMDB_API_KEY}))) 
     .then(response => response.json()) 
     .then(jsonResponse => { 
      _this.setState({searching: false}); 

      const navigateAction = NavigationActions.navigate({ 
       routeName: 'MoviesList', 
       params: {data: jsonResponse} 
      }) 

      _this.props.navigation.dispatch(navigateAction) 

     }) 
     .catch(err => console.error(err.toString())) 
} 

DrawerNavigator：

export default MenuNavScreen = DrawerNavigator(
{ 
    Home: { 
     screen: HomeScreen 
    }, 
    Movies: { 
     screen: MoviesStackNavigator 
    }, 
    DiscoverMovies: { 
     screen: DiscoverScreen 
    }, 
    About: { 
     screen: AboutScreen 
    }, 
}, 
{ 
    initialRouteName: 'Home' 
}) 

MoviesStackNavigator：

export default MoviesStackNavigator = StackNavigator({ 
    MoviesList: { 
     screen: MoviesListScreen 
    }, 
    MovieDetails: { 
     screen: MovieDetailsScreen 
    }, 
}); 

最后，该代码在那里我检查F或PARAMS MoviesListScreen：

//... 
componentWillMount() { //THIS IS CALLED TWICE 

    if(!this.props.navigation.state.params) { 
     MoviesService.getPopularMovies() 
      .then(movies => { 
       this.setState({movies: movies.results}) 
      }) 
      .catch(err => Alert.alert(err.toString())) 
    } 
    else { 
     this.setState({movies: this.props.navigation.state.params.data.results}) 
    } 
} 
//... 

好了，代码的最后一块被执行两次。首先“数据”参数未定义，第二次使用正确填充的参数。我的错误在哪里？谢谢大家:)

编辑：要清楚，这是上述问题的结果：

IMAGE

Answer 1

一段时间后，我意识到，我可以通过更换DiscoverScreen解决问题一个新的DiscoverStackNavigator，然后将DiscoverScreen，MoviesListScreen和MovieDetailsS​​creen设置为其子屏幕。所以，我的代码是看现在这个样子：

DrawerNavigator：

export default MenuNavScreen = DrawerNavigator(
{ 
    Home: { 
     screen: HomeScreen 
    }, 
    Movies: { 
     screen: MoviesStackNavigator 
    }, 
    DiscoverMovies: { 
     screen: DiscoverStackNavigator 
    }, 
    About: { 
     screen: AboutScreen 
    }, 
}, 
{ 
    initialRouteName: 'Home' 
}) 

DiscoverStackNavigator：

export default DiscoverStackNavigator = StackNavigator({ 
    DiscoverMovies: { 
     screen: DiscoverScreen 
    } 
    DiscoverMoviesList: { 
     screen: MoviesListScreen 
    }, 
    DiscoverMovieDetails: { 
     screen: MovieDetailsScreen 
    }, 
}); 

导航到MoviesScreen：

onSearchConfirm() { 
    //...code before 

    return fetch(Configuration.TMDB_BASE_URL 
       .concat('/discover/movie?') 
       .concat(Utility.stringFromQueryParams({...params, api_key: Configuration.TMDB_API_KEY}))) 
     .then(response => response.json()) 
     .then(jsonResponse => { 
      _this.setState({searching: false}); 

      const navigateAction = NavigationActions.navigate({ 
       routeName: 'DiscoverMoviesList', // we changed the route name 
       params: {data: jsonResponse} 
      }) 

      _this.props.navigation.dispatch(navigateAction) 

     }) 
     .catch(err => console.error(err.toString())) 
} 

我不知道这是不是正确的做法，但它很好。