反应导航 state.params 不起作用

Posted 2023-03-15

【中文标题】反应导航 state.params 不起作用

【英文标题】：React navigation state.params not working

【发布时间】：2018-03-18 13:10:24

【问题描述】：

它不工作。我什么都试过了。没有任何效果。如果您制作高级应用程序，state.params 根本不存在。

我对反应“导航”有这个问题。它在手册中说 params 对象应该在那里 https://reactnavigation.org/docs/navigation-prop.html#state-the-screen-s-current-state-route 但它不是。

当我链接到屏幕 2 时，我在屏幕 1 中设置了这样的 id 参数：

 <TouchableWithoutFeedback onPress= ()=> this.props.navigation.navigate('FontsTab',  id: item.id )  style=styles.listHeader >
                <View  style=styles.listRowContainer>
                    <View  style=styles.listinside1Container>
                        <Image  style=styles.listImage source=item.icon />
                        <View  style=styles.listContainer onPress=(event) => this._selectedItem(item.text)  >
                            <Text style=styles.listHeader >
                              item.title
                            </Text>
                            <Text  style=styles.listValue >item.value</Text>
                            <Image 
                                style=width: 50, height: 50
                                source=uri: item.img
                            />

                        </View>
                    </View>

                                </View>
            </TouchableWithoutFeedback>

但它不起作用。在屏幕 2 中，我无法使用 state.params ：

     <ScrollView style=styles.container>
          <Text> JSON.stringify(this.props.navigation)</Text>
          <Text>TEST state.params </Text>
          <Image
              style=width: 150, height: 150
              source=uri: this.state.dataSource.img
          />
          <Text  style=styles.textStyle >this.state.dataSource.text</Text>
      </ScrollView>

state.params 什么都不返回。我该怎么办？

screen2 的完整类：

class Fonts extends Component 
    constructor(props) 
        super(props);
        this.state = 
            params: null,
            selectedIndex: 0,
            value: 0.5,
            dataSource: null,
            isLoading: true
        ;
        this.componentDidMount = this.componentDidMount.bind(this);
    
    getNavigationParams() 
        return this.props.navigation.state.params || 
    

    componentDidMount()
        return fetch('http://www.koolbusiness.com/newvi/4580715507220480.json')
            .then((response) => response.json())
            .then((responseJson) => 
                this.setState(
                    ...this.state,
                    isLoading: false,
                    dataSource: responseJson,
                , function()
                );
            )
            .catch((error) =>
                console.error(error);
            );
    
  render() 
      if(this.state.isLoading)
          return(
              <View style=flex: 1, padding: 20>
                  <ActivityIndicator/>
              </View>
          )
      
    return (
      <ScrollView style=styles.container>
          <Text> JSON.stringify(this.props)</Text>
          <Text>TEST this.state.params </Text>
          <Image
              style=width: 150, height: 150
              source=uri: this.state.dataSource.img
          />
          <Text  style=styles.textStyle >this.state.dataSource.text</Text>
      </ScrollView>
    );
  

在我的应用中，这种痛苦可以通过 screen1 中的一个简单按钮重现：

<Button onPress=() => navigate('FontsTab', name: 'Brent' ) title="Go to Brent's profile" />

然后切换到 FontsTab 工作，但参数不在状态对象中：

我也有这个标签视图的代码

import React,  Component  from 'react';
import  View, Text, StyleSheet  from 'react-native';

import  StackNavigator  from 'react-navigation';
import  Icon  from 'react-native-elements';

import FontsHome from '../views/fonts_home';
import FontsDetails from '../views/fonts_detail';

const FontsTabView = ( navigation ) => (
  <FontsHome banner="Fonts" navigation=navigation />
);

const FontsDetailTabView = ( navigation ) => (
  <FontsDetails banner="Fonts Detail" navigation=navigation />
);

const FontsTab = StackNavigator(
  Home: 
    screen: FontsTabView,
    path: '/',
    navigationOptions: ( navigation ) => (
      title: '',
      headerLeft: (
        <Icon
          name="menu"
          size=30
          type="entypo"
          style= paddingLeft: 10 
          onPress=() => navigation.navigate('DrawerOpen')
        />
      ),
    ),
  ,
  Detail: 
    screen: FontsDetailTabView,
    path: 'fonts_detail',
    navigationOptions: 
      title: 'Fonts Detail',
    ,
  ,
);

export default FontsTab;

【参考方案1】：

this.props.navigation.state.params.id 将为您提供从 screen1 传递的参数 id 的值。

【讨论】：

我也是这么想的，但显然我做错了什么。当我调试this.props.navigation 时，那里没有state 对象！

当我调试 state 对象时，它会显示 routeName: "Home"。为什么 routeName 不是“FontsTab”？

【参考方案2】：

我将屏幕放在正确的 StackNavigator 中，然后它就可以工作了。