ios - 怎么做二次元使用 PanResponder 进入主视图？

Question

当视图安装时，我希望辅助视图位于主视图右侧的屏幕之外。

当用户向左平移时，辅助视图应跟随平移并最终覆盖主视图。（如 Instagram 相机）

我已经建立了一个基本结构，但我不确定如何完成该<Animated.View>部分。例如，我是将平移处理程序放在主视图还是辅助视图上？我不希望辅助视图覆盖主视图上的任何交互。

import React from 'react';
import { PanResponder, Animated, Dimensions, StyleSheet, Text, View } from 'react-native';
const winWidth = Dimensions.get('window').width
const winHeight = Dimensions.get('window').height

class Main extends React.Component {
    constructor(props){
        super(props);
    }
    translateX = new Animated.Value(0);
    panResponder = PanResponder.create({
        onMoveShouldSetPanResponderCapture: (e, gs) => {
            return gs.dx < 0 //allow left only
        },
        onPanResponderMove: (e, gs) => { 
            if(gs.dx < 0) { 
                Animated.event([null, {dx: this.translateX}])(e, gs) 
            }
        },
        onPanResponderRelease: (e, {vx, dx}) => {
            //Secondary View should now cover the main View
        },
        onPanResponderTerminationRequest: (e, gs) => {
            return false 
        },
        onPanResponderTerminate: (e, {vx, dx} ) => {
        },
    })
    render(){
        return(
            <View style={{styles.main}}>
                <View style={{styles.secondary}}></View>
                <View><Text>Other components will be displayed</Text></View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    main:{
        flex:1,
        flexDirection:'column',
        backgroundColor: '#ffffff'
    },
    secondary:{
        width: winWidth,
        height: winHeight,
        backgroundColor: 'red',
        position: 'absolute',
        top:0,
        left:winWidth, //start off screen
    },
})

标签： iosreact-nativeview

Answer 1

我不确定这是否是您所追求的，但我这样做的方式是在 Animated.View 组件内嵌套两个视图，覆盖全屏。

<Animated.View style={[this.position.getLayout(), {display: 'flex', flex: 1, flexDirection: 'row'}]} {...this.panResponder.panHandlers}>
    <View style={{width: '100%', height: '100%', backgroundColor: 'yellow'}}>
        <Text>
            This is the Main view
        </Text>
    </View>

    <View style={{ height: '100%', width: '100%', backgroundColor: 'red'}}>
        <Text>
            This is the invisible View
        </Text>     
    </View>
</Animated.View>

• 视图中的样式是使每个都覆盖整个宽度

• 在 Animated.View 中，我使用数组表示法来应用两种样式

• this.position.getLayout()是给出 Animated.View 组件的坐标/位置的方法

• 另一个样式对象是这样我们可以使用 flexbox 来渲染相邻的子视图，特别是设置

• 还将 panHandlers 附加到 Animated.View

  constructor(props){
    super(props)
    position = new Animated.ValueXY()
  
    const panResponder = PanResponder.create({
        onStartShouldSetPanResponder: ()=> true,
        onPanResponderMove: (evt, gesture)=>{
            //Need to set theshhold and state.isOpen to determine direction here
            position.setValue({x: gesture.dx, y: 0})
        },
        onPanResponderGrant: ()=>{
            this.position.setOffset({x: this.position.x._value, y: 0})
            this.position.setValue({x: 0, y: 0})
        },
        onPanResponderRelease: ()=>{
            this.openOrClose()        
        }
    })
  
    this.state = {isOpen: false} 
    this.panResponder = panResponder
    this.position = position
  }
  

• 我使用状态来监视视图应该移动到this.state = {isOpen: false}的位置，具体取决于哪个视图可见。

• 要移动的函数主要是position.setValue({x: gesture.dx, y: 0})，它在触摸/平移仍处于活动状态时跟踪移动，以及this.openOrClose()，它在触摸/平移释放时调用.

• openOrClose 函数决定如何处理运动，主要逻辑应该在这里。我只是做了一个简单的案例，在这个例子中没有包含任何 threshHold。

• 要了解 panHandlers，我建议您阅读这篇文章，因为它最好地解释了onPanResponderGrant的原因。

下面是工作组件的代码

import React, {Component} from 'react'
import {View, Text, Animated, PanResponder, Dimensions} from 'react-native'

const ScreenWidth = Dimensions.get('window').width

//Logic to flattenOffset required
export class Swipable extends Component{
	constructor(props){
		super(props)
		position = new Animated.ValueXY()

		const panResponder = PanResponder.create({
			onStartShouldSetPanResponder: ()=> true,
			onPanResponderMove: (evt, gesture)=>{
				//Need to set theshhold and state.isOpen to determine direction here
				position.setValue({x: gesture.dx, y: 0})
			},
			onPanResponderGrant: ()=>{
				this.position.setOffset({x: this.position.x._value, y: 0})
				this.position.setValue({x: 0, y: 0})
			},
			onPanResponderRelease: ()=>{
				this.openOrClose()		
			}
		})

		this.state = {isOpen: false} 
		this.panResponder = panResponder
		this.position = position
	}

	openOrClose = ()=>{
		this.position.flattenOffset()
		//determine where to move depending onState
		direction = this.state.isOpen ? 0 : -ScreenWidth

		Animated.spring(this.position, {
			toValue: {x: direction, y: 0}
		}).start(()=>{
			//Callback when animation is complete to show if open or closed
			this.setState((prevState)=>{
			 	return {isOpen: !prevState.isOpen}
			})
		})
	}

	render(){
		return(
			<Animated.View style={[this.position.getLayout(), {display: 'flex', flex: 1, flexDirection: 'row'}]} {...this.panResponder.panHandlers}>
				<View style={{width: '100%', height: '100%', backgroundColor: 'yellow'}}>
					<Text>
						This is the Main view
					</Text>
				</View>
				
				<View style={{ height: '100%', width: '100%', backgroundColor: 'red'}}>
					<Text>
						This is the invisible View
					</Text>		
				</View>
			</Animated.View>
		)
	}
}

我在 Android 模拟器上运行了上面的代码，我相信它可以在 ios 上运行。如果有什么我需要澄清或改进的，请告诉我