Question

**

我有这两个组件堆栈和标签导航器，堆栈在标签导航器内，堆栈返回电影的平面列表**

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

当我点击一部电影时，我没有得到电影的详细信息，请有人帮助我

这里是 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>
    )
  }
}

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

 _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 ? ou non
              isFilmFavorite={(this.props.favoritesFilm.findIndex(film => film.id === item.id) !== -1) ? true : false}
              displayDetailForFilm={this._displayDetailForFilm}
            />
          }
          onEndReachedThreshold={0.5}
          onEndReached={() => {
              if (this.page < this.totalPages) { // On vérifie également qu'on n'a pas atteint la fin de la pagination (totalPages) avant de charger plus d'éléments
                 this._loadFilms()
              }
          }}
        />
        {this._displayLoading()}
      </View>
    )
  }
}

Answer 1

您导航到 FilmDetail：

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

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

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

替换字母：

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

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

1 个答案: