React Native 导航的问题

Question

我尝试将 React Native Navigation(StackNavigator) 添加到我的应用程序中，但它不起作用。我运行：“npm install --save react-navigation”将 StackNavigator 添加到我的应用程序，但它抛出错误：

Starting Metro Bundler on port 19001.
Info
08:59
Tunnel ready.
Error
09:00
Unable to resolve "react-native-safe-area-context" from "node_modules\react-navigation-stack\lib\module\vendor\views\Stack\StackView.js"
Error
09:00
Building JavaScript bundle: error

Answer 1

请指定您正在使用的反应导航版本（我也可以为 v5 更新我的答案！）。假设您的问题是关于react navigation v4，我正在尝试回答您的问题。仅仅安装react-navigation 包是不够的（它还需要安装一些后续包）。请按顺序执行以下步骤 -

1) npm install react-navigation

2) 安装额外的依赖项

（如果使用博览会）expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

（如果使用裸 react-native 设置）npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

另外，您似乎想创建堆栈导航器。为此，您必须安装 npm install react-navigation-stack

安装后可以将导入添加为import {createStackNavigator} from 'react-navigation-stack';

这是官方文档（有非常明确的步骤）：https://reactnavigation.org/docs/4.x/getting-started/

Answer 2

萨格尔

I followed all the steps in order as you told, but React Navigation still doesn´t work.

Here is my App code :

// App.js

import React from 'react'
import Navigation from './Navigation/Navigation'

export default class App extends React.Component {
  render() {
    return (
      <Navigation/>
    )
  }
}


// Navigation/Navigation.js

import { createStackNavigator, createAppContainer } from 'react-navigation-stack'
import Search from '../Components/Search'

const SearchStackNavigator = createStackNavigator({
  Search: {  
    screen: Search,
    navigationOptions: {
      title: 'Rechercher'
    }
  }
})

export default createAppContainer(SearchStackNavigator)


// Components/Search.js

import React from 'react'
import { StyleSheet, View, TextInput, Button, Text, FlatList, ActivityIndicator } from 'react-native'
import FilmItem from './FilmItem'
import { getFilmsFromApiWithSearchedText } from '../API/TMDBApi'
//Class Search/custome component
class Search extends React.Component {

  constructor(props) {
    super(props)
    this.searchedText = ""
    //initialise la page
    this.page = 0
    //initialise le nbr total des pages
    this.totalPages = 0
    this.state = {
      films: [],
      //gestion du boutton loading/boutton de charchement.

      isLoading: false
    }
  }

  _loadFilms() {

    if (this.searchedText.length > 0) {
      this.setState({ isLoading: true })
      //recup. tous les films correspendant au text tapé et incrinmente/ajoute une page achaque fois que le scroll est egale á 0.5
      getFilmsFromApiWithSearchedText(this.searchedText, this.page+1).then(data => {

          this.page = data.page

          this.totalPages = data.total_pages

          this.setState({
            //syntaxe E6 cici permet de creer une copie de chaque objet.Une copie de tableau de film deja recup,
            //et une copie des nouveaux films recup. de l´API
            films: [ ...this.state.films, ...data.results ],
            isLoading: false 
          })
      })
    }
  }

  _searchTextInputChanged(text) {
    this.searchedText = text 
  }


  _searchFilms() {
    this.page = 0
    this.totalPages = 0


    this.setState({
      films: [],
    }, () => {



      //vider le tab films
        this._loadFilms()
    })
  }
//fonction pour gerer le bouton de chargement
  _displayLoading() {
    if (this.state.isLoading) {//si les films sont en  cours de chargement affiche le bouton d´animation
      return (
        <View style={styles.loading_container}>
          <ActivityIndicator size='large' />
        </View>
      )
    }
  }

  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}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) => <FilmItem film={item}/>}

          onEndReachedThreshold={0.5}
          onEndReached={() => {
              if (this.page < this.totalPages) { 

                 this._loadFilms()
              }
          }}
        />

        {this._displayLoading()} 
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    marginTop: 20
  },
  textinput: {
    marginLeft: 5,
    marginRight: 5,
    height: 50,
    borderColor: '#000000',
    borderWidth: 1,
    paddingLeft: 5
  },
  loading_container: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 100,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default Search


// Components/FilmItem.js

import React from 'react'
import { StyleSheet, View, Text, Image } from 'react-native'

import { getImageFromApi } from '../API/TMDBApi'

class FilmItem extends React.Component {
  render() {

    const film = this.props.film
      //console.log(this.props);
    return (
      <View style={styles.main_container}>
        <Image

          style={styles.image}
          source={{uri: getImageFromApi(film.poster_path)}}
        />
        <View style={styles.content_container}>
          <View style={styles.header_container}>
            <Text style={styles.title_text}>{film.title}</Text>
            <Text style={styles.vote_text}>{film.vote_average}</Text>
          </View>
          <View style={styles.description_container}>
            <Text style={styles.description_text} numberOfLines={6}>{film.overview}</Text>
          </View>
          <View style={styles.date_container}>
            <Text style={styles.date_text}>Sorti le {film.release_date}</Text>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    height: 190,
    flexDirection: 'row'
  },
  image: {
    width: 120,
    height: 180,
    margin: 5,
    backgroundColor: 'gray'
  },
  content_container: {
    flex: 1,
    margin: 5
  },
  header_container: {
    flex: 3,
    flexDirection: 'row'
  },
  title_text: {
    fontWeight: 'bold',
    fontSize: 20,
    flex: 1,
    flexWrap: 'wrap',
    paddingRight: 5
  },
  vote_text: {
    fontWeight: 'bold',
    fontSize: 26,
    color: '#666666'
  },
  description_container: {
    flex: 7
  },
  description_text: {
    fontStyle: 'italic',
    color: '#666666'
  },
  date_container: {
    flex: 1
  },
  date_text: {
    textAlign: 'right',
    fontSize: 14
  }
})

export default FilmItem


// API/TMDBApi.js


const API_TOKEN = "*******************";

export function getFilmsFromApiWithSearchedText (text, page) {
  const url = 'https://api.themoviedb.org/3/search/movie?api_key=' + API_TOKEN +
   '&language=fr&query=' + text + "&page=" + page
  return fetch(url)
    .then((response) => response.json())
    .catch((error) => console.error(error))
}


  export function getImageFromApi (name) {
    return 'https://image.tmdb.org/t/p/w300' + name
  }

Answer 3

我在 OpenClassroom 的这门课程中遇到了同样的问题，这个 cade 被提取出来了。

我已经安装了 Sagar 建议的依赖项；但我也更改了代码中 react 导航模块的导入：

// 导航/Navigation.js
导入 { createStackNavigator, createAppContainer } 从 '反应导航堆栈'

我已经改变了：

从“反应导航”导入 {createAppContainer}

从 'react-navigation-stack' 导入 {createStackNavigator}

因为 createAppContainer 似乎不是来自 React-navigation-stack。

我希望这会有所帮助;-)

亲切的问候，