Question

我正在使用react-native-swipe-gestures来检测我的App中的手势。

现在，当我滑动屏幕时，它可以工作，但我也想显示从一页到另一页的一些动画

所以基本上这是我的

 <GestureRecognizer     
                onSwipeLeft={() =>  this.pageChangeNext()}
                onSwipeRight={() => this.pageChangePrev()}
                config={this.config}>

                    <View stye={ImageNews}>             
                    <Image 
                            source={{uri: this.props.news["Data"][this.state.number]["imageurl"]}}
                            style={imageurl}
                            />  
                    </View>

                    <View style={newsTitleView}>
                        <Text style={newsTitleText}> {this.props.news["Data"][this.state.number]["title"]}</Text>
                    </View> 

                    <View style={titleSubHeading}>
                        <Text style={publishTime}>{new Date(this.props.news["Data"][this.state.number]["published_on"]*1000).toString().split(' ').slice(0, 5).join(' ')}</Text>
                        <Text style={publishSource}>By {this.props.news["Data"][this.state.number]["source"]}</Text>
                    </View>
                    <View style={newsBodyView}> 
                        <Text style={newsBodyText}> {this.props.news["Data"][this.state.number]["body"]} </Text>
                    </View>
                    </GestureRecognizer>

在用户向左或向右滑动的位置，它显示了下一篇文章/上一篇文章，但是我希望页面UI在用户执行手势时分别向左/向右滑动。

问题：有人可以帮我弄清楚如何做到这一点吗？

Answer 1

做这样的事情。它对我有用：

在您的Navigator.js中

const StackNavigator = createStackNavigator({

Splash: {screen: Splash},
About: {screen: About},
},{
headerMode :'none',
mode: 'card',
navigationOptions: params => ({
gesturesEnabled: true,
gesturesDirection: 'inverted',
}),
transitionConfig: () => ({
screenInterpolator: sceneProps => {
  const { layout, position, scene } = sceneProps;
  const { index } = scene;
  const width = layout.initWidth;

  return {
    opacity: position.interpolate({
      inputRange: [index - 1, index, index + 1],
      outputRange: [ 0, 1, 0],
    }),
    transform: [{
      translateX: position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [-width, 0, width],
      }),
    }]
  };
},
headerTitleInterpolator: sceneProps => {
  const { layout, position, scene } = sceneProps;
  const { index } = scene;

  return {
    opacity: position.interpolate({
      inputRange: [index - 1, index, index + 1],
      outputRange: [ 0, 1, 0],
    }),
    transform: [{
      translateX: position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [-50, 0, 50],
      }),
    }]
  };
},
 }),


 });

现在在 onSwipeLeft（）或onSwipeRight（）

中调用this.props.navigation.navigate('ScreenName')

这将启用导航中从左到右的过渡。

在React Native中滑动动画

1 个答案: