实施例

Question

使用react-navigation与react-native。 jeg如何在动画结束时运行一个函数？所以我想回调像

navigate('RoadObject', () => { at the end of animationto do something... });

我的标签浏览器：

const MainNavigator = TabNavigator({
  Map: { 
    screen: MapScreen
  },
  RoadObject: { 
    screen: RoadObjectScreen
  }
},
{
  animationEnabled: true
});

Answer 1

您是否尝试过Transitioner | React Navigation？

似乎这可能与您的案件相关......

Transitioner是一个React组件，可帮助管理复杂动画组件的转换。它管理动画的时间并在进入和离开时跟踪各种屏幕，但它不知道什么是什么样的，因为渲染完全推迟到开发人员。在封面下，Transitioner用于实现CardStack，从而实现StackNavigator。 Transitioner做的最有用的事情是接受当前导航状态的支柱。当路线从该导航状态中移除时，Transitioner将协调远离这些路线的过渡，即使它们离开导航状态也会保持在屏幕上。

实施例

class MyNavView extends Component {
  ...
  render() {
    return (
      <Transitioner
        configureTransition={this._configureTransition}
        navigation={this.props.navigation}
        render={this._render}
        onTransitionStart={this.onTransitionStart}
        onTransitionEnd={this.onTransitionEnd}
      />
    );
}

Answer 2

我在转写方面也遇到了一些问题。我正在使用“相机”进入屏幕，但速度太慢。因此，我决定在完成过渡动画之前关闭相机，然后再打开它。

示例：

import React, {Component, createRef, RefObject} from 'react';
import {SafeAreaView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {Camera} from 'expo-camera';
import {CameraType} from 'expo-camera/build/Camera.types';
import {FontAwesome} from '@expo/vector-icons';
import {StackNavigationProp} from "@react-navigation/stack/lib/typescript/src/types";

export interface State {
    type: CameraType,
    hasPermission: boolean | null,
    takenPictures: Array<string>,
    isNavigating: boolean,
}

export interface Props {
    navigation: StackNavigationProp<any>,
}

export class CameraMan extends Component<Props, State> {
    private readonly camera: RefObject<Camera>;

    constructor(props: Props) {
        super(props);
        this.camera = createRef();

        this.state = {
            type: Camera.Constants.Type.back,
            hasPermission: null,
            takenPictures: [],
            isNavigating: true
        }
    }

    async componentDidMount() {
        this.props.navigation.addListener('transitionEnd', e => {
            this.setState({
                isNavigating: false
            });
        });

        let permissionResponse = await Camera.requestPermissionsAsync();

        this.setState({
            hasPermission: permissionResponse.granted
        });
    }

    render() {
        if (this.state.hasPermission == null) {
            return <SafeAreaView style={styles.container}>
            </SafeAreaView>;
        }

        if (!this.state.hasPermission) {
            return <SafeAreaView style={styles.container}>
                <Text>Acesso negado!</Text>
            </SafeAreaView>;
        }

        return (
            <SafeAreaView style={styles.container}>
                {
                    (this.state.isNavigating) ?
                        <View style={{flex: 1, backgroundColor: '#000'}} />
                    :
                        <Camera style={{flex: 1}}
                                type={this.state.type}
                                ref={this.camera}>
                            <View style={{flex: 1, backgroundColor: 'transparent', flexDirection: 'row'}}>
                                <TouchableOpacity style={{
                                                      position: 'absolute',
                                                      bottom: 20,
                                                      left: 20,
                                                  }}
                                                  onPress={() => this.switchCameraType()}>
                                    <Text style={{fontSize: 20, marginBottom: 13, color: '#FFF'}}>Trocar</Text>
                                </TouchableOpacity>
                            </View>
                        </Camera>
                }

                <TouchableOpacity style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#121212',
                    margin: 20,
                    borderRadius: 10,
                    height: 50,
                }} onPress={() => this.takePicture()}>
                    <FontAwesome name="camera" size={23} color="#FFF" />
                </TouchableOpacity>
            </SafeAreaView>
        );
    }

    private async takePicture() {
        const capturedPicture = await this.camera.current?.takePictureAsync();
        console.log(capturedPicture?.uri);
    }

    private switchCameraType() {
        const selectedCameraType = this.state.type == Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back;
        this.setState({type: selectedCameraType});
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    }
});

基于此：https://reactnavigation.org/docs/navigation-events/

在反应导航中动画结束后回调

2 个答案:

实施例