React Native - Pass data to another component

I'm having a question, I'm starting with react native and I'm building an app that contains some components and uses react-navigation. The question is:

From this component that renders several items, when I click I want to receive this data in the component DetailsItem.js.

import React, { Component } from 'React';
import {
    ScrollView,
    View,
    StyleSheet,
    TouchableOpacity,
    ActivityIndicator,
} from 'react-native';
import axios from 'axios';
import Itens from './Itens';
import InputSearch from './InputSearch';

export default class ListaItens extends Component {
    constructor(props){
        super(props);

        this.state = { listaItens: [] };
    }

    componentWillMount() {
        axios.get('http://ourikas.github.io/companies.json')
            .then(dados => this.setState({listaItens: dados.data}))
            .catch(() => this.setState('erro ao recuperar dados'));
    }

    onLearnMore = (item) => {
        this.props.navigation.navigate('DetalhesItem', { ...item });
    };

    render() {

        if(this.state.listaItens.length > 0){
        return(
            <View>
                <View>
                    <InputSearch />
                </View>

                <ScrollView>

                    {this.state.listaItens.map((item, i) => {
                        return (<View key={i}>
                            <TouchableOpacity onPress={() => this.props.navigation.navigate('DetalhesItem', this.onLearnMore(item))}>
                            <Itens key={item.id} item={item} />
                            </TouchableOpacity>
                        </View>)
                    })}
                </ScrollView>
            </View>

        );
    } return(<ActivityIndicator size="large" color="#666" style={styles.loadding} />);
    }
}

const styles = StyleSheet.create({
    loadding: {
        marginTop: 250
    }
});

Here is the DetailsItem.js component

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

export default class DetalhesItem extends Component {

    constructor(props){
        super(props);
    }

    render(){

        const { name, email } = this.props.navigation.state.params;

        return(
            <Text>{ alert(email) }</Text>
        );
    }
}


Não sei se vai precisar, mais aqui esta o código do App.js

    import React, { Component } from 'react';
import {
  Platform,
  View,
} from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons';

import ListaItens from './src/components/ListaItens';
import DetalhesItem from './src/components/DetalhesItem';
import Categorias from './src/components/Categorias';

export default class App extends Component {
  render() {
    return (
      <Cenas />
    );
  }
}

const Cenas = StackNavigator({
    ListaItens: {
      screen: ListaItens,
      navigationOptions: {
        title: 'Bodokas',
      },
    },

    DetalhesItem: {
      screen: DetalhesItem,
      navigationOptions: {
        title: 'voltar',
      },
    }
});


// const TabNav = TabNavigator({

//   ListaItens: {
//     screen: ListaItens,
//     navigationOptions: {
//       tabBarLabel: 'todos',
//     }
//   },

//   Categorias: {
//     screen: Categorias,
//     navigationOptions: {
//       tabBarLabel: 'Categorias',
//     }
//   },

//   DetalhesItem: {
//     screen: DetalhesItem,
//     navigationOptions: {
//       tabBarLabel: 'mais',
//     }
//   }
// }, {
//   tabBarPosition: 'bottom'
// });