react-native - 使用 React Native 的透视动画抽屉？

Question

我想创建如下所示的透视动画 -

我正在使用 react-native-scaling-drawer & 目前已经完成 -

我的 App.js 是根文件，如下 -

应用程序.js

const AppNavigator = StackNavigator(
  {
    walkthroughStack: {
      screen: WalkthroughStack,
    },
    drawerStack: {
      screen: DrawerStack,
    },
  },
  {
    initialRouteName: 'walkthroughStack',
    headerMode: 'none',
  },
);

export default AppNavigator;

我的 Walkthrough.js 文件是显示应用程序演练的文件，如下所示 -

WalkthroughStack.js

const WalkthroughStack = StackNavigator(
  {
    Walkthrough: {
      screen: Walkthrough,
    },
  },
  {
    headerMode: 'none',
    navigationOptions: {
      headerVisible: false,
    },
    initialRouteName: 'Walkthrough',
  },
);

export default WalkthroughStack;

我的 DrawerStack.js 是在 repo 中显示动画的文件 -

抽屉堆栈.js

let defaultScalingDrawerConfig = {
  scalingFactor: 0.6,
  minimizeFactor: 0.6,
  swipeOffset: 20
};

class CustomDrawerView extends Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    /** Active Drawer Swipe **/
    if (nextProps.navigation.state.index === 0)
      this._drawer.blockSwipeAbleDrawer(false);

    if (nextProps.navigation.state.index === 0 && this.props.navigation.state.index === 0) {
      this._drawer.blockSwipeAbleDrawer(false);
      this._drawer.close();
    }

    /** Block Drawer Swipe **/
    if (nextProps.navigation.state.index > 0) {
      this._drawer.blockSwipeAbleDrawer(true);
    }
  }

  setDynamicDrawerValue = (type, value) => {
    defaultScalingDrawerConfig[type] = value;
    /** forceUpdate show drawer dynamic scaling example **/
    this.forceUpdate();
  };

  render() {
    const {routes, index} = this.props.navigation.state;
    const ActiveScreen = this.props.router.getComponentForState(this.props.navigation.state);

    return (
      <ScalingDrawer
        ref={ref => this._drawer = ref}
        content={<LeftMenu navigation={this.props.navigation}/>}
        {...defaultScalingDrawerConfig}
        onClose={() => console.log('close')}
        onOpen={() => console.log('open')}
      >
        <ActiveScreen
          navigation={addNavigationHelpers({
            ...this.props.navigation,
            state: routes[index],
            openDrawer: () => this._drawer.open(),
          })}
          dynamicDrawerValue={ (type, val) => this.setDynamicDrawerValue(type, val) }
        />
      </ScalingDrawer>
    )
  }
}

const AppNavigator = StackRouter({
  {
    Main: {
      screen: Main,
    },
    Walkthrough: {
      screen: Walkthrough,
    },
    Typography: {
      screen: Typography,
    },
  },
  {
    headerMode: 'none',
    gesturesEnabled: false,
    navigationOptions: {
      headerVisible: false,
    },
    initialRouteName: 'Main',
  },
);

const CustomDrawer = createNavigationContainer(createNavigator(AppNavigator)(CustomDrawerView));

export default CustomDrawer;

但这并不像 repo 的 README 中所示那样工作。怎么做？

Answer 1

给出的示例适用于 React-Navigation 的 v1。确保您使用 v1 进行 react 导航