Question

我的React Js技能非常基础，我想要的是当我点击一个类别时，我会在新的屏幕中显示所选类别的帖子列表，在这种情况下是PostsScreen。

问题是我得到itemId null。

我不知道我做错了什么。

类别屏幕

import React, {Component} from 'react';
import { NavigationActions, DrawerNavigator,  StackNavigator } from 'react-navigation';
import{Dimensions, Button, View, SafeAreaView, FlatList, ActivityIndicator, TouchableOpacity } from 'react-native';

export default class WGoals extends Component {
static navigationOptions = {
  title: 'Categories'
    };

navigateToScreen = (route, params) => () => {
const navigateAction = NavigationActions.navigate({
  routeName: route,
  params: params
});
this.props.navigation.dispatch(navigateAction);
}

constructor(props)
  {
super(props);
this.state = { 
isLoading: true,
  }
}

  render() {

    return (

<Container style={styles.background_general}>
                <TouchableOpacity onPress={this.navigateToScreen('PostsScreen', itemId = '1')} >
                <Text>Category 1</Text>
            </TouchableOpacity>
                <TouchableOpacity onPress={this.navigateToScreen('PostsScreen', itemId = '2')} >
                <Text>Category 2</Text>
                </TouchableOpacity>
</Container>      
    );
  }
}

帖子屏幕

import React, {Component} from 'react';
import { NavigationActions, DrawerNavigator,  StackNavigator } from 'react-navigation';
import{Dimensions, View, SafeAreaView, FlatList, ActivityIndicator } from 'react-native';

export default class Posts extends Component {
static navigationOptions = {
  title: 'Posts'
};

  render() {

    const { params } = this.props.navigation.state;
    const itemId = params ? params.itemId : null;

    return (

<Container style={styles.background_general}>

<Text>Details Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>

</Container>

    );
  }
    }

Answer 1

更改功能的参数

this.navigateToScreen('PostsScreen', itemId = '1')

到

this.navigateToScreen('PostsScreen', {itemId: '1'})

如何将Params传递给React Native中的其他屏幕？

1 个答案: