[英]Why can't access params in TabRouter in react-navigation?
[英]Can't seem to access the params in react navigation
所以我試圖訪問通過 this.props.navigation.push 發送的參數,但我一生都無法弄清楚。 我總是得到 undefined 不是一個對象。 任何幫助表示贊賞。
應用程序.js:
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack'
import { SearchScreen } from './screens/SearchScreen.js'
import { ResultsScreen } from './screens/ResultsScreen.js'
import { NavigationContainer } from '@react-navigation/native'
const AppNavigator = createStackNavigator()
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<AppNavigator.Navigator>
<AppNavigator.Screen name="ResultsScreen" component={ResultsScreen} />
<AppNavigator.Screen name="SearchScreen" component={SearchScreen} />
</AppNavigator.Navigator>
</NavigationContainer>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
SearchScreen(發送參數的屏幕):
import React from 'react'
import { KeyboardAvoidingView, TextInput, Button, StyleSheet } from 'react-native'
import { url } from '../mockData.js'
export class SearchScreen extends React.Component {
state = {
title: "",
year: 0,
ID: "",
isValid: false
}
componentDidUpdate(prevProps, prevState) {
if (this.state.title !== prevState.title ||
this.state.year !== prevState.year ||
this.state.ID !== prevState.ID)
{
this.isInputValid()
}
}
getHandler = key => val => {
this.setState({ [key]: val })
}
handleTitleChange = this.getHandler('title')
handleYearChange = this.getHandler('year')
handleIDChange = this.getHandler('ID')
handleSubmit = () => {
movieArr = [this.state.title, this.state.year, this.state.ID]
movies = getMovies(movieArr)
this.props.navigation.push('ResultsScreen', {movies: movies})
}
isInputValid = () => {
if (this.state.title || this.state.year || this.state.ID) {
this.setState({ isValid: true })
}
}
render() {
return (
<KeyboardAvoidingView behavior="padding">
<TextInput
placeholder='title'
value={this.state.title}
onChangeText={this.handleTitleChange}
style={styles.input}
/>
<TextInput
placeholder='phone'
value={this.state.phone}
onChangeText={this.handlePhoneChange}
style={styles.input}
keyboardType='numeric'
/>
<TextInput
placeholder='imdb ID'
value={this.state.ID}
onChangeText={this.handleIDChange}
style={styles.input}
/>
<Button
title='submit'
onPress={this.handleSubmit}
disabled={!this.state.isValid}
/>
</KeyboardAvoidingView>
)
}
}
async function getMovies(info) {
if (info[0] !== "") {
if (info[2] !== "") {
url += `&t=${info[0]}&i=${info[2]}`
} else {
url += `&s=${info[0]}`
}
}
if (info[1] !== 0) {
url += `&y=${info[1]}`
}
return await fetch(url)
}
styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
input: {
borderWidth: 1,
borderColor: 'black',
minHeight: 20,
minWidth: 100
}
})
ResultsScreen(我想通過它訪問參數的屏幕):
import React from 'react'
import {Text, StyleSheet} from 'react-native'
import MovieSections from '../MovieSections.js'
export class ResultsScreen extends React.Component {
movies = this.props.navigation.getParam('movies')
validate = () => {
if (this.movies.Error === "Incorrect IMDb ID.") {
return <Text>The imdbID is invalid...Check for any typos.</Text>
} else if (this.movies.Error === "Movie not found!") {
return <Text>The movie wasn't found 😢... See if you entered the information correctly!</Text>
}
}
goToDetails = () => {
this.props.navigation.navigate('SearchScreen')
}
render() {
return(
<MovieSections movies={this.props.movies} goToDetails={this.goToDetails}/>
)
}
}
styles = StyleSheet.create({
error: {
color: 'red',
alignSelf: 'center'
}
})
順便說一句,如果您發現其他任何可能導致錯誤的內容,請告訴我。 謝謝
首先導航參數應該是對象。 所以你必須像這樣傳遞參數:
this.props.navigation.push('ResultsScreen',{
movies: movies
})
然后你可以通過this.props.navigation.getParam()
方法訪問導航參數。 所以代替
movies = this.props.route.params.movies
你應該使用:
movies = this.props.navigation.getParam('movies');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.