React Native异步获取JSON，但是抽象到一个单独的组件

Question

我的应用程序有一个按钮，可获取JSON api结果，并在TEXT字段中对其进行更新。效果很好。

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

export default class HomeScreen extends Component{
    state = {
        serverJSON: 'not yet downloaded',
    }

    onPress_ServerDownload = () => {
       this.fetchServerJSON();
     }

    fetchServerJSON() {
        return fetch('http://localhost/test.json')
          .then((response) => response.json())
          .then((responseJson) => {
             this.setState({serverJSON: responseJson.myapielement.description});
          })
          .catch((error) =>{
            console.error(error);
          });
      }

    render() {
        return (
            <View>
                <View><Text>Welcome</Text></View>
                <View><Button title="Download Server INIT feed" onPress={this.onPress_ServerDownload} /></View>
                <View><Text>{this.state.serverJSON}</Text></View>
            </View>
        ) 
    } 
} 

我正在努力的工作是将其抽象为一个单独的组件（单独的JS文件），然后该组件可以供各种不同的Screen使用，并将参数/属性作为查询字符串传递给API。像这样：

MainApp

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

export default class HomeScreen extends Component{
    state = {
        serverJSON: 'not yet downloaded',
    }

    onPress_ServerDownload = () => {
       this.fetchServerJSON();
     }

    render() {
        return (
            <View>
                <View><Text>Welcome</Text></View>
                <View><Button title="Download Server INIT feed" onPress={this.onPress_ServerDownload} /></View>
                <View><AsyncComponent /></View>
            </View>
        ) 
    } 
} 

抽象组件

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

export default class AsyncComponent extends Component{
    state = {
        serverJSON: 'not yet downloaded',
    }

    fetchServerJSON() {
        return fetch('http://localhost/test.json')
          .then((response) => response.json())
          .then((responseJson) => {
             this.setState({serverJSON: responseJson.myapielement.description});
          })
          .catch((error) =>{
            console.error(error);
          });
      }

    render() {
        return (
            <View>
                <View><Text>{record.title}</Text></View>
                <View><Text>{record.description}</Text></View>
            </View>
        ) 
    } 
} 

我希望能够而不是直接将JSON定位为目标http://localhost/api/v1/get.php?query=xxxxx，但我需要将该xxxxx参数/ prop传递给组件，以便可以使用不同的屏幕相同的组件可以查询不同的内容。

非常感谢