React Native Navigation Prop 未正确传递参数答案

【问题标题】：React Native Navigation Prop Not passing parameters correctlyReact Native Navigation Prop 未正确传递参数
【发布时间】：2020-12-22 16:58:54
【问题描述】：

在我的 React Native 应用程序中，我的 app.js 设置了以下路由：

export default class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
          name="Home"
          component={ItemListing}
          />
          <Stack.Screen
          name="Details"
          component={ItemImageDetails}
          />
        </Stack.Navigator>
    </NavigationContainer>
    )
  }
}

我有一个 ItemListing 组件，它有多个 ItemImage 组件，按下时应该导航到 Details 页面，该页面是 ItemImageDetails 组件，方法是传入一个唯一的 id。这些是用 Typescript 编写的。

ItemListing 将导航道具传递给 ItemImage，如下所示：

import { NavigationScreenProp } from 'react-navigation'

...

interface ItemListingProps {
  navigation: NavigationScreenProp<any,any>
}

export default class ItemListing extends Component<ItemListingProps,ItemListingState> {
  constructor (props: ItemListingProps) {
    super(props)
    this.state = {
      results: [],
      searchTerm: ""
    }
  }

  ...

  render() {
    return (
      <>
            <View>
              {this.state.results.map((result,index) =>
                <ItemImage
                  navigation={this.props.navigation}
                  imageMetadata={result.data[0]}
                  imageUrl={result.links[0].href}
                  key={index}

                />
              )}
            </View>
      </>
    )
  }
}

ItemImage 写成：

import { NavigationScreenProp } from 'react-navigation'

...

interface ItemImageProps {
  navigation: NavigationScreenProp<any,any>
  imageMetadata: ImageMetadata
  imageUrl: string
}

export default class ItemImage extends Component<ItemImageProps,{}> {
  constructor (props: ItemImageProps) {
    super(props)
  }

  render() {
    return (
      <>
        <TouchableOpacity
          onPress={() => 
            this.props.navigation.navigate('Details', { 
              id: this.props.imageMetadata.id
            })
          }
        >
        </TouchableOpacity>
      </>
    )
  }
}

ItemImageDetails 组件如下：

interface ItemImageDetailsProps {
  id: string
}
export default class ItemImageDetails extends Component<ItemImageDetailsProps, {}> {
  constructor (props: ItemImageDetailsProps) {
    super(props)
  }
  
  ...
  
  render() {

    return (
      <>
      <Text>THIS IS THE DETAILS PAGE</Text>
      <Text>{this.props.id}</Text>

      ...
      </>
    )
  }
}

但是，ItemImageDetails 的 props 中的 id 在 console.log 中显示为“未定义”。没有错误并且项目正确构建。详细信息页面已成功导航到，并且 ItemImage 组件中的 id 正确，它似乎只是在导航道具中传递错误

【问题讨论】：

您必须像 this.props.route.params.id 这样访问 id，因为您正在传递 props，就像在 route 中一样。

标签： reactjs typescript react-native react-navigation

【解决方案1】：

你的道具界面不对。导航道具是由导航和路由组成的。内部路由有一个名为 params 的属性，所以如果你想访问 id，你必须去那里。另外我建议您输入您的路线，这样您就可以避免此类问题https://reactnavigation.org/docs/typescript

interface ItemImageDetailsProps {
  navigate: any;
  route: any;
}
export default class ItemImageDetails extends Component<ItemImageDetailsProps, {}> {
  constructor (props: ItemImageDetailsProps) {
    super(props)
  }
  
  ...
  
  render() {

    return (
      <>
      <Text>THIS IS THE DETAILS PAGE</Text>
      <Text>{this.props.route.params.id}</Text>

      ...
      </>
    )
  }
}

【讨论】：

【解决方案2】：

您可以简单地在 ItemImageDetail 中获取此 ID，如下所示：

const id = this.props.navigation.getParam('id', null);

【讨论】：