React 本机导航的问题

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_modulesreact-navigation-stacklibmodulevendorviewsStackStackView.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

(如果使用裸反应本机设置(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

Sagar

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。

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

Navigation/Navigation.js
import { createStackNavigator， createAppContainer } from "反应-导航-堆栈">

我已经改变了：

从'react-navigation'导入{createAppContainer}

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

由于createAppContainer并不来自React-navigation-stack。

我希望这能有所帮助;-(

亲切问候