Question

我想创建一个侧面菜单，但是我不想使用rn路由器通量抽屉，因为我希望菜单在主要内容上滑动而不是在其顶部滑动。我对动画非常陌生，但这似乎应该是一个简单的任务。基本上，我将主屏幕的宽度设置为用户屏幕宽度的1.75倍，安装组件时，我希望初始x值为0.75 *屏幕宽度，然后当我按下按钮时，将x值滑动到0（或组件最左侧的x值。

这是我到目前为止所拥有的：


import React, {Component} from 'react';
import {View, Dimensions, Animated} from 'react-native';
import SideMenu from '../../components/Home/SideMenu';
import Header from '../../components/Home/Header';
import LocationInfo from '../../components/Home/LocationInfo';
import Tabs from '../../components/Home/Tabs';
import Colors from '../../Colors';

class Main extends Component {
  state = {
    active: 0,
    xSideMenu: 0,
    xHome: 0,
    translateX: new Animated.Value(0),
  };

  handleSlide = type => {
    let {translateX} = this.state;
    Animated.timing(translateX, {
      toValue: type,
      duration: 75,
    }).start();
  };
  render() {
    return (
      <View style={styles.homeContainerStyle}>
        <SideMenu />
        <View style={styles.topSectionContainer}>
          <Header />
          <View style={styles.locationInfoContainer}>
            <LocationInfo />
          </View>
          <View style={styles.tabsContainer}>
            <Tabs />
          </View>
        </View>
      </View>
    );
  }
}

const styles = {
  homeContainerStyle: {
    width: Dimensions.get('window').width * 1.75,
    flexDirection: 'row',
  },
  topSectionContainer: {
    backgroundColor: Colors.white,
    shadowColor: Colors.black,
    shadowOffset: {width: 0, height: 1},
    shadowOpacity: 0.3,
  },
  locationInfoContainer: {
    width: Dimensions.get('window').width,
    paddingTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabsContainer: {
    paddingTop: 5,
  },
};

export default Main;

我已经开始配置动画，但是有人对下一步应该有什么建议吗？

反应本机滑动侧菜单动画

0 个答案: