React native 如何在StackNavigator中将参数传递到屏幕？

我的本地代码：

import React, { Component } from 'react';
import { AppRegistry, ActivityIndicator, StyleSheet, ListView, 
  Text, Button, TouchableHighlight, View } from 'react-native';

import { StackNavigator } from 'react-navigation';
import DetailsPage from './src/screens/DetailsPage';

class HomeScreen extends React.Component {

   constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      userDataSource: ds,
    };
  }

  componentDidMount(){
      this.fetchUsers();
  }

    fetchUsers(){

        fetch('https://jsonplaceholder.typicode.com/users')
            .then((response) => response.json())
            .then((response) => {
                this.setState({
                    userDataSource: this.state.userDataSource.cloneWithRows(response)
                });
            });
    }

    onPress(user){
        this.props.navigator.push({
            id: 'DetailPage'
        });
    }

  renderRow(user, sectionID, rowID, highlightRow){
      return(
      <TouchableHighlight onPress={()=>{this.onPress(user)} } >
      <View style={styles.row}>
        <Text style={styles.rowText}> {user.name} </Text>

      </View>
      </TouchableHighlight>
      )
  }


  render(){
      return(
          <ListView
            dataSource = {this.state.userDataSource}
            renderRow = {this.renderRow.bind(this)}
          />
      )
  } 
}

详细信息屏幕为：

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

import styles from '../styles';


export default class DetailsPage extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `User: ${navigation.state.params.user.name}`,
  });
  render() {
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text style={styles.myStyle}>Name: {params.name}</Text>
        <Text style={styles.myStyle}>Email: {params.email}</Text>
      </View>
    );
  }
}

我想使用

onPress

功能导航到

DetailPage

。如果我像这样提醒它：

onPress(user){ Alert.alert(user.name)}

我确实得到了值，但如何将其传递到另一页

---

非常感谢

您可以使用

导航

函数的第二个参数传递参数：

onPress(user) {
  this.props.navigation.navigate(
    'DetailPage',
    { user },
  );
}

React Navigation 5.x（2020年） 在

this.props.route.params中访问它们

。例如，在您的

详细信息页面中：

<Text style={styles.myStyle}>{this.props.route.params.user.name}</Text>

在react钩子中，参数使用useNavigation发送导航

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

<Button
      title="Back"
      onPress={() => {
        navigation.navigate('MyScreen',{name:'test'});
      }}
    />

从'@react-navigation/native'导入{useNavigation}；
const navigation=useNavigation（）；
{
导航（'MyScreen'，{name:'test'}）；
}}
/>

然后使用useNavigationParam访问它们

function MyScreen() {
  const name = useNavigationParam('name');
  return <p>name is {name}</p>;
}

函数MyScreen（）{
const name=useNavigationParam（'name'）；
返回名称为{name}
；
}

它解决了我的问题

this.props.navigation.navigate("**stack_Name**", {
 screen:"screen_name_connect_with_**stack_name**",
 params:{
 user:"anything_string_or_object"
}
})

在你的第一页，说CountriesList

const CountriesList = ({ navigation }) => {

/* Function to navigate to 2nd screen */
  const viewCountry = (country) => {
    navigation.navigate('ListItemPageRoute', { name: country.country_name });
  };
}

对于第二个页面名称，请说ListItemPageRoute

const ListItemPageRoute = (props) => {

return (
    <View style={styles.container}>
        <Text style={styles.countryText}> { props.route.params.name } </Text>
    </View>
  );
};

const ListItemPageRoute=（道具）=>{
返回(
{props.route.params.name}
);
};

“Props.route”对象将包含您希望从一个屏幕传递到另一个屏幕的所有参数的列表。
对于我来说，由useNavigation（）和useRoute（）解决：

对于功能组件：

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

import*as React from'React'；
从“react native”导入{Button}；
从'@react-navigation/native'导入{useNavigation}；
函数MyBackButton（）{
const navigation=useNavigation（）；
返回(
{
navigation.goBack（）；
}}
/>
);
}

对于类组件：

class MyText extends React.Component {
  render() {
    // Get it from props
    const { route } = this.props;
  }
}

// Wrap and export
export default function(props) {
  const route = useRoute();

  return <MyText {...props} route={route} />;
}

类MyText扩展React.Component{
render（）{
//从道具上得到它
const{route}=this.props；
}
}
//包装和导出
导出默认功能（道具）{
const route=useRoute（）；
返回；
}
onPress={（）=>{this.props.navigation.navigate（'AllImages'，{Types:item.type}）}
console.log（'valuesstrong text，this.props.route.params.Types）；***
1）如何通过参数将数据发送到另一个屏幕：
onPress={（项目）=>props.navigation.navigate（'Your ScreenName'，{item:item}）}

2） 如何在另一个屏幕上获取数据：
const{item}=props.route.params
谢谢。我遇到了一个错误，我尝试了
'DetailPage'，{users:user})
成功了。如果您能帮忙，我还有一个问题。我试图使用用户数组中的一个参数，
id
来
从另一个API获取数据，在哪里以及如何使用它？试图通过声明，
var theId='${navigation.state.params.users.id}从
fetch中使用它
但它不起作用。你能给我指一下正确的方向吗？非常感谢。看起来像是打字错误，试试
${navigation.state.params.user.id}
（
user
而不是
users
）不，我是以
users
，
'DetailPage'，{users:user}的身份传递的)；
。不确定在
获取中在何处以及如何调用它，请提供帮助。我在组件的静态导航选项中的HeaderRigh属性上添加了一个按钮。在该按钮上，我想传递组件中定义的方法的引用。但我无法传递该按钮。可以吗help@RobinGarg这是离题的，但你会找到解决问题的办法我们在这个github问题上的问题是：这正是导航的方式。非常有用。谢谢
const ListItemPageRoute = (props) => {

return (
    <View style={styles.container}>
        <Text style={styles.countryText}> { props.route.params.name } </Text>
    </View>
  );
};

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

class MyText extends React.Component {
  render() {
    // Get it from props
    const { route } = this.props;
  }
}

// Wrap and export
export default function(props) {
  const route = useRoute();

  return <MyText {...props} route={route} />;
}