如何使用React Native Transitioner？修改Android默认屏幕转场方向

嘿，我来帮你搞定这两个问题！先看怎么把StackNavigator的默认转场改成Right-To-Left，再给你详细讲React Native Transitioner的用法～

一、修改StackNavigator的转场为Right-To-Left #

看你用的是旧版的react-navigation（StackNavigator属于v1版本），要修改转场效果其实很简单，只需要在导航配置里添加transitionConfig，指定官方提供的水平转场插值器就行。补全你的代码如下：

import React from 'react';
import { Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import Screen3 from './Screen3';

const StackComps = StackNavigator({
  Screen1: { screen: Screen1 },
  Screen2: { screen: Screen2 },
  Screen3: { screen: Screen3 },
}, {
  // 配置自定义转场
  transitionConfig: () => ({
    // 使用水平方向的插值器，默认就是Right-To-Left的推入效果
    screenInterpolator: CardStackStyleInterpolator.forHorizontal,
  }),
});

export default StackComps;

解释下：CardStackStyleInterpolator.forHorizontal是官方封装好的水平转场逻辑，正好对应你要的从右到左的切换效果。如果之后你想做更个性化的转场，也可以自己写screenInterpolator函数，手动控制每个页面的位移、透明度等样式变化。

二、React Native Transitioner的使用 #

Transitioner是React Native提供的底层转场组件，适合需要高度自定义转场动画的场景——它不像导航库那样封装好现成的转场，而是让你手动管理转场状态、渲染视图和定义动画逻辑。

给你一个简单的示例，实现两个场景之间的自定义左右转场：

首先导入所需组件：

import React from 'react';
import { Transitioner, View, Text, TouchableOpacity, Easing } from 'react-native';

然后实现组件：

class CustomTransitionDemo extends React.Component {
  // 管理当前显示的场景
  state = {
    activeScene: 'home',
  };

  // 配置转场的时长和动画曲线
  configureTransition = () => {
    return {
      duration: 350,
      easing: Easing.inOut(Easing.ease),
    };
  };

  // 根据场景标识渲染对应的页面内容
  renderScene = ({ scene }) => {
    switch (scene) {
      case 'home':
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff' }}>
            <Text style={{ fontSize: 20 }}>首页</Text>
            <TouchableOpacity 
              onPress={() => this.setState({ activeScene: 'settings' })}
              style={{ marginTop: 30, padding: 10, backgroundColor: '#2196F3' }}
            >
              <Text style={{ color: '#fff' }}>进入设置页</Text>
            </TouchableOpacity>
          </View>
        );
      case 'settings':
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5' }}>
            <Text style={{ fontSize: 20 }}>设置页</Text>
            <TouchableOpacity 
              onPress={() => this.setState({ activeScene: 'home' })}
              style={{ marginTop: 30, padding: 10, backgroundColor: '#2196F3' }}
            >
              <Text style={{ color: '#fff' }}>返回首页</Text>
            </TouchableOpacity>
          </View>
        );
      default:
        return null;
    }
  };

  // 定义转场过程中的动画逻辑
  renderTransition = ({ scenes, progress }) => {
    const [currentScene, nextScene] = scenes;

    // 计算当前场景的退出动画：向左位移并淡出
    const currentTranslateX = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, -100],
    });
    const currentOpacity = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [1, 0],
    });

    // 计算下一个场景的进入动画：从右侧移入并淡入
    const nextTranslateX = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [100, 0],
    });
    const nextOpacity = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1],
    });

    return (
      <View style={{ flex: 1 }}>
        {/* 渲染当前场景的退出视图 */}
        {currentScene && (
          <View 
            style={{
              position: 'absolute',
              inset: 0,
              opacity: currentOpacity,
              transform: [{ translateX: currentTranslateX }],
            }}
          >
            {this.renderScene({ scene: currentScene })}
          </View>
        )}
        {/* 渲染下一个场景的进入视图 */}
        {nextScene && (
          <View 
            style={{
              position: 'absolute',
              inset: 0,
              opacity: nextOpacity,
              transform: [{ translateX: nextTranslateX }],
            }}
          >
            {this.renderScene({ scene: nextScene })}
          </View>
        )}
      </View>
    );
  };

  render() {
    return (
      <Transitioner
        currentScene={this.state.activeScene}
        configureTransition={this.configureTransition}
        renderScene={this.renderScene}
        renderTransition={this.renderTransition}
      />
    );
  }
}

export default CustomTransitionDemo;

关键props说明：

• currentScene: 控制当前显示的场景，当这个值变化时，Transitioner会自动触发转场动画。
• configureTransition: 返回转场的基础配置，比如动画时长、缓动曲线。
• renderScene: 根据场景标识渲染对应的页面内容，你可以在这里放任何React Native组件。
• renderTransition: 核心的动画逻辑部分，通过progress（0到1的动画进度值）来插值计算视图的样式变化，实现你想要的转场效果。

内容的提问来源于stack exchange，提问作者Somename