ios - 如何让辅助 <View> 使用 PanResponder 进入主视图？

Question

当 View 安装时，我希望辅助 View 离开屏幕到主视图的右侧。

当用户平移向左时，辅助 View 应该跟随平移并最终覆盖主视图。 (比如 Instagram 相机)

我已经设置了一个基本结构，但我不确定如何最终确定 <Animated.View>部分。例如，我是将平移处理程序放在主视图还是辅助 View 上？我不希望辅助 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
    },
})

Answer 1

我不确定这是否是您想要的，但我的做法是在覆盖整个屏幕的 Animated.View 组件中嵌套两个 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>

• Views 中的样式是让每一个覆盖整个宽度

• 在 Animated.View 中，我使用数组符号来应用两种样式

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

• 另一个样式对象是这样我们就可以使用 flexbox 特别设置来渲染彼此相邻的 subview

• 还将 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
  }
  

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

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

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

• 要了解 panHandlers，我建议您阅读 this article因为它解释了 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 上运行。如果有任何我需要澄清或改进的地方，请告诉我