如何通过本机中的多个组件处理触摸手势?

时间:2017-11-17 14:39:29

标签: react-native

使用React Native 0.47和yarn,我正在创建一个介绍部分,您可以在其中滑动多个页面,最后进入主页。 所以我们从右向左滑动页面并像这样移动: Slide1 - > Slide2 - > Slide3 - > Slide4 - >主页。我有一个组件,显示一个覆盖所有屏幕的幻灯片页面。例如,第一张幻灯片如下所示:

Slide

代码是:

class IntroSlide extends Component {
  render () {
    return (
      <View style={[styles.introSlide, this.props.myStyle]}>
        <View style={styles.introSlideIconView}>
          <Icon name={this.props.iconName} size={SLIDE_ICON_SIZE} color="white"/> 
        </View>
        <View style={styles.introSlideTextView}>
          <Text style={styles.introSlideTextHeader}> {this.props.headerText} </Text>
          <Text style={styles.introSlideText}> {this.props.text} </Text>
        </View>
      </View>
    );
  }
}

我在这里使用它:

import AppIntro from 'react-native-app-intro'; 
// Other imports here
export default class Intro extends Component {
render() {
    return (
      <View style={{flex: 1}}> 
        <AppIntro
          showSkipButton={false}
          nextBtnLabel={<Text style={styles.introButton}>بعدی</Text>}
          doneBtnLabel={<Text style={styles.introButton}>شروع</Text>}
        >

          <IntroSlide 
            iconName="user" 
            myStyle={styles.introSlide1}
            headerText="DontCare"
            text= "SomeTextDoesntMatter"
          />       
         </AppIntro>
       </View>
        );

      }
    }

我正在使用react-native-app-intro这为我提供了一个非常酷的傻瓜,但问题出在这里:

我有一个小View组件,其中包含Iconreact-native-vector-icons),因为您可以看到我想要在我滑动到下一页时旋转。我在IntroSlide中创建了一个panResponder,并将其设置为View的顶部。但我的幻灯片无法接收任何事件。我认为react-native-app-intro提供的一些父视图捕获了所有事件,我仍然可以浏览页面,但不会显示控制台日志。这就是我所做的:

class IntroSlide extends Component {
  constructor(props) {
    super(props);
    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: () => console.log("Moving"),
    });

    this.pan = panResponder;
  }



 render () {
    return (
      <View 
         style={[styles.introSlide, this.props.myStyle]}
         {...this.pan.panHandlers}
      >
        <View style={styles.introSlideIconView}>
          <Icon name={this.props.iconName} size={SLIDE_ICON_SIZE} color="white"/> 
        </View>
        <View style={styles.introSlideTextView}>
          <Text style={styles.introSlideTextHeader}>   {this.props.headerText} </Text>
          <Text style={styles.introSlideText}> {this.props.text} </Text>
        </View>
      </View>
    );
   }
 }

我使用Viewflex: 1组件做了相同的操作,结果不一样。我得到了预期的控制台日志,但我不能再刷卡了。那么如何在父组件中接收触摸事件时滑动页面? (换句话说,我想要两个不同的组件来接收触摸事件,而我正在为Android开发)

0 个答案:

没有答案