Question

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

代码是：

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组件，其中包含Icon（react-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>
    );
   }
 }

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

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

0 个答案: