反应本机移动一个按钮给孩子听

Question

我正在使用react-native-swiper来构建我的应用程序的主用户界面，并且需要想办法从子组件中添加按钮来滑动屏幕。

下面的代码工作(点击Previous Screen将滑动屏幕到屏幕2)，但我需要找到一种方法，以移动Previous Screen文本到<ScreenThree />组件。

如何将<Text onPress={() => this.refs.swiper.scrollBy(-1)} >Previous Screen</Text> <ScreenThree /> 移动到<ScreenThree />组件？

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Swiper from 'react-native-swiper';
import ScreenThree from './components/ScreenThree';

class Home extends Component {

  render() {
    return (
      <Swiper
        loop={false}
        showsPagination={false}
        index={1}
        ref='swiper'>
        <View style={styles.viewStyle}>
          <Text>Screen 1</Text>
        </View>

        <View style={styles.viewStyle}>
          <Text>Screen 2</Text>
        </View>

        <View style={styles.viewStyle}>
          <ScreenThree />
          <Text onPress={() => this.refs.swiper.scrollBy(-1)} >Previous Screen</Text>
        </View>
      </Swiper>
    )
  }

}

const styles = StyleSheet.create({
  viewStyle: {
    flex: 1,
  }
})


export default Home

Answer 1

class Home extends Component {
  render() {
    return (
      <Swiper
        loop={false}
        showsPagination={false}
        index={1}
        ref='swiper'>
        <View style={styles.viewStyle}>
          <Text>Screen 1</Text>
        </View>

        <View style={styles.viewStyle}>
          <Text>Screen 2</Text>
        </View>

        <View style={styles.viewStyle}>
          <ScreenThree onPress={() => this.refs.swiper.scrollBy(-1)}/>
        </View>
      </Swiper>
    )
  }
}

class ScreenThree extends Component {
  render() {
    return (
      <Text onPress={this.props.onPress}>Previous Screen</Text>
    )
  }
}