Question

我的应用内页中有此编码

我要从中单击wifi列表项的屏幕3，然后应打开Wifi屏幕

屏幕3是Tab导航器中的屏幕，在使用堆栈导航进行身份验证布局后会激活

我的编码如下

screenthree.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')错误之后

依赖项： “ expo”：“ ^ 28.0.0”， “ native-base”：“ ^ 2.6.1”， “ react”：“ 16.3.1”， “ react-native”：“ https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz”， “ react-native-swiper”：“ ^ 1.5.13”， “反应导航”：“ 2.0.1”

Answer 1

您正试图使参数不在类WifiScreen之外。那就是为什么它会出错。您应该从班级内部获取参数。如下所示。

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>
        );
    }
}

屏幕导航不适用于Params React导航

1 个答案: