如何在不同文件中的组件之间导航并传递本机数据

Question

我现在正在制作一个应用程序，它有 2 个组件。我的目录结构如下：

-app
    -components
        -Dashboard
            -index.js
        -Home
            -index.js
-App.js

这是我的Dashboard/index.js：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import { Header,  Icon, SearchBar, ListItem } from 'react-native-elements';

class Dashboard extends Component{
  operate() 
  {
    console.log('hello')
  }
  render() {
    return (
      <View style={styles.container}>
        <Header
          leftComponent={{ icon: 'menu', color: '#fff' }}
          centerComponent={{ text: 'App', style: { color: '#fff' } }}
          rightComponent={{ icon: 'home', color: '#fff' }}
        />
            <View>
                <Button title='back' onPress={() => this.operate()}/>
                <Button title='bookmark' onPress={() => this.operate()}/>
            </View>
            <View>
            <Text>
              This is Dashboard Screen
            </Text>
          </View>
      </View>
    );
  }
}
export default Dashboard;

这是我的Home/index.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import { Header,  Icon, SearchBar, ListItem } from 'react-native-elements';

class Home extends Component{
  operate() 
  {
    console.log('hello')
  }
  render() {
    return (
      <View style={styles.container}>
        <Header
          leftComponent={{ icon: 'menu', color: '#fff' }}
          centerComponent={{ text: 'App', style: { color: '#fff' } }}
          rightComponent={{ icon: 'home', color: '#fff' }}
        />
            <View>
              <Text>
                This is HOME
              </Text>
            </View>
            <View>
            <Button
              title="Go to Details... again"
              onPress={() => this.props.navigation.navigate('Dashboard')}
            />  
            </View>
            <View>
            {
              list.map((l, i) => (
                <ListItem 
                  key={i}
                  title={l.name}
                />
              ))
            }
          </View>
      </View>
    );
  }
}
const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  }
]

export default Home;

这是我的App.js

import React, {Component} from 'react';
import { createStackNavigator, createAppContainer } from "react-navigation";
import Home from './app/components/Home'
import Dashboard from './app/components/Dashboard'

const AppNavigator = createStackNavigator({
  home: {
    screen: Home
  },
  dashboard: {
    screen: Dashboard
  }
});
export default createAppContainer(AppNavigator);

所以我被困在这里。我为此遵循了不同的教程。我正在我的主页上显示list.name，当按下任何名称时，用户可以转到Dashboard以及与该名称关联的其余详细信息。但是我无法导航到Dashboard，因此我不知道如何传递该数据。所以我的问题是这个-如何在这些组件之间导航并传递数据？

谢谢

Answer 1

首先，您必须在ListItem中添加onPress()，以便能够按名称并传递值。

list.map((l, i) => (
  <ListItem 
    key={i}
    title={l.name}
    onPress={()=>this._navigateToDashboard(l.name)}
  />
))

按下名称时，它将触发_navigateToDashboard()函数，l.name是将传递的值。以下代码是获取函数中值的方式。

_navigateToDashboard(name){
    // navigate the dashboard screen and pass the value 
    this.props.navigation.navigate('dashboard', { any_variable_name:name })
}

从仪表板中，您可以像这样检索传递的数据：

var name = this.props.navigation.state.params.any_variable_name;

Answer 2

在react-navigation中，有一个可以在屏幕之间传递的params参数。

发送屏幕使用以下选项进行导航：

this.props.navigation.navigate('Details', {
    itemId: 86,
    name: 'anything you want here',
    moreDetail: {name: 'can be object'},
});

然后在另一个屏幕上使用以下方法检索数据：

const { navigation } = this.props;
const itemId = navigation.getParam('itemId', 'NO-ID-DEFAULT');
const otherParam = navigation.getParam('name', 'some default value');
const details = navigation.getParam('moreDetail', {});

您

现在甚至无法导航的另一个原因是因为您有：

onPress={() => this.props.navigation.navigate('Dashboard')}

虽然它应该是：

onPress={() => this.props.navigation.navigate('dashboard')}

由于您在App.js中定义为小写

有关如何导航的参考：https://reactnavigation.org/docs/en/navigating.html

关于如何传递参数的参考：https://reactnavigation.org/docs/en/params.html