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

在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

Answer 2

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

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;

如何在不同文件中的组件之间导航并传递数据以本地方式做出反应

2 个答案: