rn-sliding-up-panel 在 Android-React Native 的抽屉导航中不起作用

Question

我有一个小应用程序，它的侧面应该有一个抽屉菜单 和一个小加号按钮，可向上滑动带有更多 4 个按钮的面板 像这样：

app.js 启动一个 Switch 导航器，它有 2 个屏幕，一个用于登录，一个用于堆栈

堆栈具有 DrawerNavigation 作为菜单屏幕和其他屏幕。 在抽屉导航中还有其他一些屏幕： 下面的代码：

const SideMenuDrawer = createDrawerNavigator({
  Main: MainScreen,
  'Invite A Friend Screen': InviteAFriendScreen,
  About: AboutScreen,
  Schedule: ScheduleScreen,
  Groups: GroupsScreen
},
  {
    navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        headerTitle: routeName,
        headerTintColor: '#ffffff',
        headerStyle: {
          backgroundColor: '#2F95D6',
          borderBottomColor: '#ffffff',
          borderBottomWidth: 3,
        },
        headerTitleStyle: {
          fontSize: 18
        }
      }
    }
  }
);

const AppStack = createStackNavigator({
  MainScreen: SideMenuDrawer,
  PhotoScreen: PhotoScreen,
  DocumentScreen: DocumentScreen,
  AudioScreen: AudioScreen,
  GalleryScreen: GalleryScreen

},
  {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Icon
            name="md-menu"
            size={35}
            style={{ paddingLeft: 10 }}
            color="white"
            onPress={() => navigation.openDrawer()}
          />
        )
      }
    }
  }
);



const AppContainer = createAppContainer(createSwitchNavigator(
  {
    LoginSplashScreen: LoginSplashScreen,
    MainScreen: AppStack
  },
  {
    initialRouteName: 'MainScreen',
  }
));

export default class App extends React.Component {
  render() {
    return (
      <AppContainer />
    )
  }
}

并且SlidingPanel在菜单屏幕的render()函数中：

class MainScreen extends React.Component {
  state = {
    slideUpPanelvisible: false
  }

  render() {
    const window = Dimensions.get('window');
    const { navigation } = this.props;
    const signedIn = global.signedIn;
    const name = global.name;
    const photoUrl = global.photoUrl;

    return (

      <View style={{ flex: 1 }}>
        <View style={[styles.container]}  >
          <Text style={styles.header}>Welcome {name}</Text>
          <Image style={styles.image} source={{ uri: photoUrl }} />
        </View>

        <View style={styles.addButton}>
          <TouchableOpacity
            onPress={() => this.setState({ slideUpPanelvisible: true })} >
            <Icon name="add-circle" size={60} color='#0E2E49' />
          </TouchableOpacity>
        </View>

        <SlidingUpPanel
          visible={this.state.slideUpPanelvisible}
          startCollapsed={true}
          draggableRange={{ top: window.height * 0.4, bottom: 0 }}
          onRequestClose={() => this.setState({ slideUpPanelvisible: false })}
          allowDragging={true}
        >
          <View style={styles.panelcontainer}>
            <Text style={styles.header}>Text inside the Sliding Panel </Text>

          </View>
        </SlidingUpPanel> 
      </View>

    )
  }
}

但抽屉在 android 设备（GEnymotion、android studio 和真实设备）上不显示 在 Iphone 设备上效果很好！

我做错了什么？

Answer 1

在最新版本的 react-navigation 中，需要添加 react-native-gesture-handler 并链接。否则手势将无法在 Android 上运行。

https://github.com/kmagiera/react-native-gesture-handler

  npm install --save react-native-gesture-handler
  react-native link react-native-gesture-handler

还要确保链接正确（有时自动链接可能会失败）。在此之后，您可以看到抽屉在 android 中工作。

参考文档：https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html