React-Native - 调用子函数以从父元素单击更新

Question

我有一个子组件需要在父组件中发生单击事件时更新，下面是代码，我需要调用startLoader函数。

子组件：

class Footer extends Component {
        constructor(props) {
            super(props);

            this.state = {
                showText: true,
                showLoader:false,
            };
          }

            startLoader = () => {


            this.setState({
                   showText:false,
                   showLoader:true
                   });
          }

            finishLoader = () => {


            this.setState({
                   showText:false,
                   showLoader:true
                   });
            }
        render() {



            return (<View style={styles.container}>
                          { this.state.showText ? <Text style={styles.text}>Load More</Text> : null }
                          { this.state.showLoader ? <Image style={{width: 30, height: 30}} source={require('./images/loader.gif')}/> : null }

                      </View>);

          }

        }

父组件：

class Social extends Component {
        constructor(props) {
            super(props);

            var tabLabel = this.props.tabLabel;
            var dataSource = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
            this.state = {
                text: 'Search ' + tabLabel + ' here...' ,
                textInput: '',
                dataSource:dataSource,
                height:height,
                searchHeight: 40,
                nextPageToken: '',
                arrVideos: new Array(),
                listHeight: height,
            };
          }



          renderRow(rowData: object, sectionID: number, rowID: number) {
              return (
                <TouchableHighlight
                  underlayColor = '#ddd'>
                  <View style ={styles.row}>
                    <View style={styles.imagecon}>
                      <Image style={{width: 100, height: 80}} source={{uri: rowData.thumbnail}}  />
                    </View>
                    <View style={styles.textcon}>
                        <Text style={{ fontSize: 11, fontWeight: 'bold' }} > {rowData.title}  </Text>
                        <Text style={{ fontSize: 11}} > {rowData.desc}  </Text>
                    </View>
                  </View>
                </TouchableHighlight>

              )
            }
                doneClick = () => {

                        this.props.showTrans();
                    fetch("https://www.googleapis.com/youtube/v3/search?part=snippet&q=tupac&key=AIzaSyDFOz50C_XkuEh2T-2XTN9fqm_5xHYzbg8&pageToken=" + this.state.nextPageToken)
                                          .then((response) => response.json())
                                          .then((responseData) => {
                                            console.log('fxbxfbxf' + responseData.toString());
                                            console.log('ghghgh' + responseData["items"].length);
                                            //let doc = new DomParser().parseFromString(html,'text/html')
                                            for(var i = 0; i < responseData["items"].length; i++) {
                                                var title = responseData["items"][i]["snippet"].title;
                                                var thumbnail = responseData["items"][i]["snippet"]["thumbnails"]["default"]["url"];
                                                var desc = responseData["items"][i]["snippet"]["description"];

                                                var video = {
                                                    title : title,
                                                    thumbnail: thumbnail,
                                                    desc: desc
                                                }

                                                this.state.arrVideos.push(video);
                                            }

                                            this.setState({
                                                dataSource: this.state.dataSource.cloneWithRows(this.state.arrVideos),
                                                nextPageToken: responseData.nextPageToken,
                                                listHeight: (120 * this.state.arrVideos.length) + 80,
                                            });
                                            this.props.hideTrans();
                                          })
                                          .done();



                }


                loadMore = () => {
                this.refs['footer'].startLoader();
                fetch("https://www.googleapis.com/youtube/v3/search?part=snippet&q=tupac&key=AIzaSyDFOz50C_XkuEh2T-2XTN9fqm_5xHYzbg8&pageToken=" + this.state.nextPageToken)
                                      .then((response) => response.json())
                                      .then((responseData) => {
                                        console.log('fxbxfbxf' + responseData.toString());
                                        console.log('ghghgh' + responseData["items"].length);
                                        //let doc = new DomParser().parseFromString(html,'text/html')
                                        for(var i = 0; i < responseData["items"].length; i++) {
                                            var title = responseData["items"][i]["snippet"].title;
                                            var thumbnail = responseData["items"][i]["snippet"]["thumbnails"]["default"]["url"];
                                            var desc = responseData["items"][i]["snippet"]["description"];

                                            var video = {
                                                title : title,
                                                thumbnail: thumbnail,
                                                desc: desc
                                            }

                                            this.state.arrVideos.push(video);
                                        }

                                        this.setState({
                                            dataSource: this.state.dataSource.cloneWithRows(this.state.arrVideos),
                                            nextPageToken: responseData.nextPageToken,
                                            listHeight: (120 * this.state.arrVideos.length) + 80,
                                        });
                                        this.props.hideTrans();
                                      })
                                      .done();


                }

                  render() {


                    return (
                        <View style={styles.menu} >



                                <View style={{alignItems: 'flex-start',
                                                                     flexDirection: 'row',
                                                                     backgroundColor: '#90CAF9', height: this.state.searchHeight}} >
                                <Image style={{marginTop: 10 ,marginLeft: 10 , width: 20, height: 20}} source={require('./images/search.png')} />
                                <TextInput
                                        onSubmitEditing={ this.doneClick }
                                     style={{marginLeft: 5, color: '#757575', width: width - 80, height: 40, fontSize: 11,}}
                                     onChangeText={(textInput) => this.setState({textInput})}
                                     placeholder={this.state.text}
                                      underlineColorAndroid="transparent"
                                     />
                            </View>
                            <View style={styles.sep} >
                            </View>
                        <ScrollView style={{flex:1}}>
                              <SGListView
                        stickyHeaderIndices={[]}
                        onEndReachedThreshold={1}
                        scrollRenderAheadDistance={1}
                        pageSize={1}
              initialListSize={9}
                              renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
                                style = {{flex:1, flexDirection: 'column',
                                              backgroundColor: 'white', height: this.state.listHeight}}
                                dataSource = {this.state.dataSource}
                                renderRow = {this.renderRow.bind(this)}
                                renderFooter={() => <TouchableOpacity  onPress={() => this.loadMore() }><Footer  ref='footer' /></TouchableOpacity>}
                                >
                              </SGListView>
                              </ScrollView>
                        </View>

                    );
                  }
                }

其中Footer是需要更新子组件的onpress。我怎么能这样做？