React native React native中的堆栈导航器和选项卡导航器

**

我有两个组件stack和tab navigator，stack在tabnavigator中，stack返回一个电影的平面列表**

const Stack= createStackNavigator();
function MyStack() {
  return (
    
    <Stack.Navigator>
      <Stack.Screen name="Search" component={Search}  options={{title:'Rechercher'}}/>
      <Stack.Screen name="Filmdetail" component={FilmDetail}  />
    </Stack.Navigator>
    
  );
}



  const MoviesTabNavigator = createBottomTabNavigator()
  function Mytab () {
    return (
      <NavigationContainer>
        <MoviesTabNavigator.Navigator>
          <MoviesTabNavigator.Screen name="Search" component={MyStack} />
          <MoviesTabNavigator.Screen name="Favorites" component={Favorites} />
        </MoviesTabNavigator.Navigator>
      </NavigationContainer>
    )}

    export default Mytab

const Stack=createStackNavigator（）；
函数MyStack（）{
返回(
);
}
const MoviesTabNavigator=createBottomTabNavigator（）
函数Mytab（）{
返回(
)}
导出默认Mytab

当我点击一部电影时，我不知道电影的细节，请有人帮我

这是filmdetail.js

class FilmDetail extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      film: undefined,
      isLoading: true
    }
  }

  componentDidMount() {
    getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data => {
      this.setState({
        film: data,
        isLoading: false
      })
    })
  }

  _displayLoading() {
    if (this.state.isLoading) {
      return (
        <View style={styles.loading_container}>
          <ActivityIndicator size='large' />
        </View>
      )
    }
  }

_toggleFavorite() {
    const action = { type: "TOGGLE_FAVORITE", value: this.state.film }
    this.props.dispatch(action)
}

componentDidUpdate() {
    console.log("componentDidUpdate : ")
    console.log(this.props.favoritesFilm)
  }
  _displayFavoriteImage() {
    var sourceImage = require('../Images/nolike.png')
    if (this.props.favoritesFilm.findIndex(item => item.id === this.state.film.id) !== -1) {
      // Film dans nos favoris
      sourceImage = require('../Images/like.png')
    }
    return (
      <Image
        style={styles.favorite_image}
        source={sourceImage}
      />
    )
}


  _displayFilm() {
    const { film } = this.state
    if (film != undefined) {
      return (
        <ScrollView style={styles.scrollview_container}>
          <Image
            style={styles.image}
            source={{uri: getImageFromApi(film.backdrop_path)}}
          />
          <Text style={styles.title_text}>{film.title}</Text>
          <TouchableOpacity title="favoris" style={styles.favorite_container} onPress={() => this._toggleFavorite()}>
           {this._displayFavoriteImage()}   
          </TouchableOpacity>
          <Text style={styles.description_text}>{film.overview}</Text>
          <Text style={styles.default_text}>Sorti le {moment(new Date(film.release_date)).format('DD/MM/YYYY')}</Text>
          <Text style={styles.default_text}>Note : {film.vote_average} / 10</Text>
          <Text style={styles.default_text}>Nombre de votes : {film.vote_count}</Text>
          <Text style={styles.default_text}>Budget : {numeral(film.budget).format('0,0[.]00 $')}</Text>
          <Text style={styles.default_text}>Genre(s) : {film.genres.map(function(genre){
              return genre.name;
            }).join(" / ")}
          </Text>
          <Text style={styles.default_text}>Companie(s) : {film.production_companies.map(function(company){
              return company.name;
            }).join(" / ")}
          </Text>
        </ScrollView>
      )
    }
  }

  render() {
      console.log(this.props)
    return (
      <View style={styles.main_container}>
        {this._displayLoading()}
        {this._displayFilm()}
      </View>
    )
  }
}

 _displayDetailForFilm = (idFilm) => {
    console.log("Display film with id " + idFilm)
    this.props.navigation.navigate("FilmDetail", { idFilm: idFilm })
  }

render() {
    return (
      <View style={styles.main_container}>
        <TextInput
          style={styles.textinput}
          placeholder='Titre du film'
          onChangeText={(text) => this._searchTextInputChanged(text)}
          onSubmitEditing={() => this._searchFilms()}
        />
        <Button title='Rechercher' onPress={() => this._searchFilms()}/>
        <FlatList
          data={this.state.films}
          extraData={this.props.favoritesFilm}
          // On utilise la prop extraData pour indiquer à notre FlatList que d’autres données doivent être prises en compte si on lui demande de se re-rendre
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) =>
            <FilmItem
              film={item}
              // Ajout d'une props isFilmFavorite pour indiquer à l'item d'afficher un You navigate to 
FilmDetail
:

 this.props.navigation.navigate("FilmDetail", { idFilm: idFilm })

类FilmDetail扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
电影：未定义，
孤岛加载：正确
}
}
componentDidMount（）{
getFilmDetailFromApi（this.props.navigation.state.params.idFilm）。然后（data=>{
这是我的国家({
电影：数据，
孤岛加载：false
})
})
}
_显示加载（）{
if（此.state.isLoading）{
返回(
)
}
}
_toggleFavorite（）{
const action={type:“TOGGLE_FAVORITE”，值：this.state.film}
本.道具.调度（动作）
}
componentDidUpdate（）{
日志（“componentDidUpdate:”）
console.log（this.props.favoritesFilm）
}
_displayFavoriteImage（）{
var sourceImage=require（“../Images/nolike.png”）
if（this.props.favoritesFilm.findIndex（item=>item.id==this.state.film.id）！=-1）{
//不喜欢电影
sourceImage=require（“../Images/like.png”）
}
返回(
)
}
_显示胶片（）{
const{film}=this.state
如果（胶片！=未定义）{
返回(
{电影名称}
这个。_toggleFavorite（）}>
{this.\u displayFavoriteImage（）}
{电影概述}
Sorti le{moment（新日期（film.release_Date））.format（'DD/MM/YYYY'）}
注：{film.vote_average}/10
投票名称：{电影。投票{u计数}
预算：{数字（film.Budget）.format（'0,0[.]00$）}
类型：{film.genres.map（函数（类型））{
返回genre.name；
}).join（“/”}
公司：{电影。制作公司。地图（功能（公司）{
返回company.name；
}).join（“/”}
)
}
}
render（）{
console.log（this.props）
返回(
{this.\u displayLoading（）}
{这个。_displayFilm（）}
)
}
}

这里是Search.js，其中声明并调用函数diplaydetailforfilms

class FilmDetail extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      film: undefined,
      isLoading: true
    }
  }

  componentDidMount() {
    getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data => {
      this.setState({
        film: data,
        isLoading: false
      })
    })
  }

  _displayLoading() {
    if (this.state.isLoading) {
      return (
        <View style={styles.loading_container}>
          <ActivityIndicator size='large' />
        </View>
      )
    }
  }

_toggleFavorite() {
    const action = { type: "TOGGLE_FAVORITE", value: this.state.film }
    this.props.dispatch(action)
}

componentDidUpdate() {
    console.log("componentDidUpdate : ")
    console.log(this.props.favoritesFilm)
  }
  _displayFavoriteImage() {
    var sourceImage = require('../Images/nolike.png')
    if (this.props.favoritesFilm.findIndex(item => item.id === this.state.film.id) !== -1) {
      // Film dans nos favoris
      sourceImage = require('../Images/like.png')
    }
    return (
      <Image
        style={styles.favorite_image}
        source={sourceImage}
      />
    )
}


  _displayFilm() {
    const { film } = this.state
    if (film != undefined) {
      return (
        <ScrollView style={styles.scrollview_container}>
          <Image
            style={styles.image}
            source={{uri: getImageFromApi(film.backdrop_path)}}
          />
          <Text style={styles.title_text}>{film.title}</Text>
          <TouchableOpacity title="favoris" style={styles.favorite_container} onPress={() => this._toggleFavorite()}>
           {this._displayFavoriteImage()}   
          </TouchableOpacity>
          <Text style={styles.description_text}>{film.overview}</Text>
          <Text style={styles.default_text}>Sorti le {moment(new Date(film.release_date)).format('DD/MM/YYYY')}</Text>
          <Text style={styles.default_text}>Note : {film.vote_average} / 10</Text>
          <Text style={styles.default_text}>Nombre de votes : {film.vote_count}</Text>
          <Text style={styles.default_text}>Budget : {numeral(film.budget).format('0,0[.]00 $')}</Text>
          <Text style={styles.default_text}>Genre(s) : {film.genres.map(function(genre){
              return genre.name;
            }).join(" / ")}
          </Text>
          <Text style={styles.default_text}>Companie(s) : {film.production_companies.map(function(company){
              return company.name;
            }).join(" / ")}
          </Text>
        </ScrollView>
      )
    }
  }

  render() {
      console.log(this.props)
    return (
      <View style={styles.main_container}>
        {this._displayLoading()}
        {this._displayFilm()}
      </View>
    )
  }
}

 _displayDetailForFilm = (idFilm) => {
    console.log("Display film with id " + idFilm)
    this.props.navigation.navigate("FilmDetail", { idFilm: idFilm })
  }

render() {
    return (
      <View style={styles.main_container}>
        <TextInput
          style={styles.textinput}
          placeholder='Titre du film'
          onChangeText={(text) => this._searchTextInputChanged(text)}
          onSubmitEditing={() => this._searchFilms()}
        />
        <Button title='Rechercher' onPress={() => this._searchFilms()}/>
        <FlatList
          data={this.state.films}
          extraData={this.props.favoritesFilm}
          // On utilise la prop extraData pour indiquer à notre FlatList que d’autres données doivent être prises en compte si on lui demande de se re-rendre
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) =>
            <FilmItem
              film={item}
              // Ajout d'une props isFilmFavorite pour indiquer à l'item d'afficher un You navigate to 
FilmDetail
:

 this.props.navigation.navigate("FilmDetail", { idFilm: idFilm })

\u displayDetailForFilm=（idFilm）=>{
console.log（“id为“+idFilm的显示胶片”）
this.props.navigation.navigate（“FilmDetail”，{idFilm:idFilm}）
}
render（）{
返回(
此.\u searchTextInputChanged（text）}
onSubmitEditing={（）=>this.\u searchFilms（）}
/>
这是。_searchFilms（）}/>
item.id.toString（）}
renderItem={（{item}）=>
您可以导航到
FilmDetail
：

<Stack.Screen name="Filmdetail" component={FilmDetail}  />

您的屏幕声明为
Filmdetail
（注意小写字母“d”）：



替换该信：


^
我更改了它，但现在我得到了以下错误：TypeError:this.props.navigation.state在componentDidMount（）上未定义{>22 | getFilmDetailFromApi（this.props.navigation.state.params.idFilm）。然后（data=>{^23}this.setState（{24 | film:data，25 | isLoading:false