web-dev-qa-db-fra.com

React Native - React Transitions de navigation)

Je voudrais utiliser React Navigation dans ma nouvelle application native React, mais je ne trouve aucun exemple montrant comment créer des transitions d'affichage personnalisées. Les transitions par défaut fonctionnent bien, mais j'aimerais pouvoir les personnaliser à quelques endroits et les documents ne sont pas très utiles à ce sujet. Quelqu'un a déjà essayé ça? Partout où je pourrais voir un exemple de travail? Merci d'avance.

react-nativereact-navigation
16
karol.barkowski

Vous pouvez trouver une version détaillée de cet article sur ce lien

J'espère que c'est assez clair avec étape par étape pour savoir comment créer une transition personnalisée.

Créez une ou deux scènes pour naviguer

class SceneOne extends Component {
    render() {
        return (
            <View>
                <Text>{'Scene One'}</Text>
            </View>
        )
    }
}
class SceneTwo extends Component {
    render() {
        return (
            <View>
                <Text>{'Scene Two'}</Text>
            </View>
        )
    }
}

Déclarez vos scènes d'application

let AppScenes = {
    SceneOne: {
        screen: SceneOne
    },
    SceneTwo: {
        screen: SceneTwo
    },
}

Déclarez la transition personnalisée

let MyTransition = (index, position) => {
    const inputRange = [index - 1, index, index + 1];
    const opacity = position.interpolate({
        inputRange,
        outputRange: [.8, 1, 1],
    });

    const scaleY = position.interpolate({
        inputRange,
        outputRange: ([0.8, 1, 1]),
    });

    return {
        opacity,
        transform: [
            {scaleY}
        ]
    };
};

Déclarer le configurateur de transitions personnalisées

let TransitionConfiguration = () => {
    return {
        // Define scene interpolation, eq. custom transition
        screenInterpolator: (sceneProps) => {

            const {position, scene} = sceneProps;
            const {index} = scene;

            return MyTransition(index, position);
        }
    }
};

Créer un navigateur d'application à l'aide de Stack Navigator

const AppNavigator = StackNavigator(AppScenes, {
    transitionConfig: TransitionConfiguration
});

Utilisez App Navigator dans votre projet

class App extends Component {
    return (
        <View>
            <AppNavigator />
        </View>
    )
}

Enregistrez votre application dans eq. index.ios.js

import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('MyApp', () => App);

Mise à jour # 1

Quant à la question de savoir comment définir la transition par scène, voici comment je le fais.

Lorsque vous naviguez à l'aide de NavigationActions de react-navigation, vous pouvez passer par quelques accessoires. Dans mon cas, ça ressemble à ça

this.props.navigate({
    routeName: 'SceneTwo',
    params: {
        transition: 'myCustomTransition'
    }
})

puis à l'intérieur du configurateur, vous pouvez basculer entre ces transitions comme ceci

let TransitionConfiguration = () => {
    return {
        // Define scene interpolation, eq. custom transition
        screenInterpolator: (sceneProps) => {

            const {position, scene} = sceneProps;
            const {index, route} = scene
            const params = route.params || {}; // <- That's new
            const transition = params.transition || 'default'; // <- That's new

            return {
                myCustomTransition: MyCustomTransition(index, position),
                default: MyTransition(index, position),
            }[transition];
        }
    }
};
66
Tim Rijavec