时间戳

首页 > 解决方案 > 如何在不同文件中的组件之间导航并传递数据反应原生

react-native - 如何在不同文件中的组件之间导航并传递数据反应原生

问题描述

我现在正在制作一个应用程序，它有 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，因此我不知道如何传递该数据。所以我的问题是——如何在这些组件之间导航并传递数据？

谢谢

标签： react-native

解决方案

其中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

推荐阅读