Question

我正在尝试制作一个使用React Navigation搜索电影并显示列表的基本应用程序。在我的“主”屏幕中，它显示一个InputText框，在其中键入影片，在另一个屏幕中，它使用omdb API显示结果。

我的问题是如何从主屏幕->应用程序-> Api

传递信息

我能想到的是，它就像screenProps的反面，但我看不到它将如何实现。

这是一些伪代码，用于显示我的想法。

Main Screen
<TextInput onChangeText = {set App State}

App
state = {
 what was passed by Main Screen
}
<App NAvigator screenProps = {whats the APi returns after its sent the state} />

Api
Takes whats in the App State and returns the film array

Movie Details
Takes the film array passed as a screenProp in App and turns it into a list of films.

Answer 1

您将传递另一个作为回调函数的道具。不知道您的代码是什么样子，但示例如下：

在主屏幕中：

// on the click of the search button

fetch("myserver.com/search", {
    method: "POST",
    body: JSON.stringify({
        search: this.state.inputText
    })
})
.then(response => response.json())
.then(apiResults => {
    this.navigate("MovieList", { 
            list: apiResults,
            onMovieSelected: (selectedMovie) => {
                 console.log("User selected a movie "+selectedMovie.title);
            }
        }
    }
)

在电影列表中：

// after a user chooses a movie
props.navigation.state.params.onMovieSelected(selectedMovie)

在React Native中将道具从屏幕传递回App

1 个答案: