如何将字符串从一个组件传递到另一个组件？

Question

登录组件：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TextInput,
  Image
} from 'react-native';
var DisplayData = require('./DisplayData');

export default class Login extends Component{
  constructor(props){
   super(props)

   this.state = {
     Latitude: '',
     Longitude: '',
   }
 }

  onPressDisplayData() {
    this.props.navigator.push({
        name: 'DisplayView',
        component: DisplayData
    });
  }
  render() {
    return (
      <View style = {styles.container}>
        <Image source={require('./logo.png')}/>
             <TextInput
                style = {styles.input}
                placeholder = 'Latitude'
                autoCapitalize = 'none'
                onChangeText={(text) => this.setState({Latitude:text})}
             />
             <TextInput
                style = {styles.input}
                placeholder = 'Longitude'
                autoCapitalize = 'none'
                onChangeText={(text) => this.setState({Longitude:text})}
             />
             <TouchableHighlight
                style = {styles.submit}
                onPress = {() => this.onPressDisplayData()
                }
              >
                <Text>
                   Submit
                </Text>
             </TouchableHighlight>
          </View>
    );
  }
}
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      alignItems: 'center',
      justifyContent:'center',
      paddingBottom: 40
   },
   input: {
      margin: 15,
      height: 40,
      borderColor: 'grey',
      borderWidth: 1
   },
   submit: {
      backgroundColor: '#FFDD03',
      padding: 10
   }
})

module.exports = Login;

DisplayData组件：

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

var REQUEST_URL = 'http://api.geonames.org/earthquakesJSON?north='+4+'&south='+-9.9+'&east='+-22.4+'&west='+55.2+'&username=afdsanfd'
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
class DisplayData extends Component {

  constructor(props){
    super(props)

    this.state = {
      earthquakes: ds.cloneWithRows([])
    };
  }

  componentDidMount() {
    fetch(REQUEST_URL)
    .then((response) => response.json())
    .then((responseData) => this.setState({ earthquakes: ds.cloneWithRows(responseData.earthquakes) }))
    .catch(function(error) {
      console.warn(error);
    });
  }

  render() {
    return (
      <View>
        <ListView
          dataSource = {this.state.earthquakes}
          renderRow={(rowData) => (
            <View style={{flex: 1, paddingTop: 10, paddingBottom: 10, borderWidth: 0.5, paddingLeft: 10, borderColor: '#D3D3D3'}}>
              <Text style={{fontSize: 25}}>{rowData.src}</Text>
              <Text>DateTime: {rowData.datetime}</Text>
              <Text>Magnitude: {rowData.magnitude}</Text>
              <Text>EqID: {rowData.eqid}</Text>
              <Text>Depth: {rowData.depth}</Text>
            </View>
          )}
        />
      </View>
    );
  }
}

module.exports = DisplayData;

所以我想通过这个应用程序实现的是让某人输入纬度和经度，以便返回地震信息的API调用（REQUEST_URL）。但是，我很难将输入的纬度和经度传递给DisplayData组件。我已经尝试过诸如创建全球纬度和经度之类的东西，但没有一个工作过。