gpt4 book ai didi

javascript - 屏幕导航不适用于 Params React Navigation

转载 作者:行者123 更新时间:2023-11-30 14:32:12 25 4
gpt4 key购买 nike

我的应用内页中有这段代码

屏幕 3 我想点击 wifi 列表项然后打开 Wifi 屏幕

屏幕 3 是来自 Tab 导航器的屏幕,它在带有堆栈导航器的 auth 布局之后被激活

我的编码如下

屏幕三.js

import React, { Component } from "react";
import {
View,

StyleSheet
} from "react-native";
import { Container, Header, Content, List, ListItem, Text, Icon, Left, Body, Right, Switch } from 'native-base';

class ScreenThree extends Component{
render(){
return (
<Container>

<Content>
<List>

<ListItem icon onPress={()=>this.props.navigation.navigate('WifiScreen', {
itemId: 86,
otherParam: 'anything you want here',
})}>
<Left>
<Icon name="wifi" />
</Left>
<Body>
<Text>Wi-Fi</Text>
</Body>
<Right>
<Text>GeekyAnts</Text>
<Icon name="arrow-forward" />
</Right>
</ListItem>
</List>
</Content>
</Container>
);
}
}
export default ScreenThree;

const styles = StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
});

wifi屏幕的编码如下

import React, { Component } from "react";
import {
View,
Text,
StyleSheet
} from "react-native";


// const itemId = this.props.navigation.getParam('itemId', 'NO-ID');
// const otherParam = this.props.navigation.getParam('otherParam', 'some default value');

class WifiScreen extends Component{
render(){
return (
<View style={styles.container}>
<Text>WifiScreen</Text>
{/* <Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text> */}
</View>
);
}
}
export default WifiScreen;

const styles = StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
});

现在一切正常,当我点击 wifi 列表项时 wifi 屏幕打开,除非我取消注释 wifi.js 中的参数编码

在取消注释后我得到 undefined is not an object (evaluating 'this.props.navigation.navigate') 错误

依赖关系:“世博会”:“^28.0.0”, “ native 基础”:“^2.6.1”, “ react ”:“16.3.1”, “ native react ”:“https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz”, “react-native-swiper”:“^1.5.13”, “ react 导航”:“2.0.1”

最佳答案

您正在尝试获取 WifiScreen 类之外的参数。这就是为什么它会出错。您应该从类(class)中获取参数。像下面这样。

class WifiScreen extends Component{
render(){
const {itemId, otherParam} = this.props.navigation.state.params;
return (
<View style={styles.container}>
<Text>WifiScreen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
</View>
);
}
}

关于javascript - 屏幕导航不适用于 Params React Navigation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50998967/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com