vue.js - DrawerLayoutAndroid in vue-native

Question

Hy folks,

I'am trying to use DrawerLayoutAndroid from react-native in the vue-native, because I am coding in Vue.js language. The question is: Is it possible?

Here is the trying code:

<template>
    <DrawerLayoutAndroid
      drawerWidth="300"
      drawerPosition="left"
      renderNavigationView="navigationView"
      >
      <view class="container">
        <Navbar />
        <text class="text-color-primary">My App</text>
      </view>
    </DrawerLayoutAndroid>
</template>

<script>
import Navbar from './src/Navbar/Navbar.vue'
import { TouchableWithoutFeedback, DrawerLayoutAndroid } from 'react-native-gesture-handler'

export default {
  components: {
    Navbar,
    DrawerLayoutAndroid
  },
  methods: {
    navigationView: () => {
      return (<template>
                  <view>
                      <text> Texto do Menu </text>
                  </view>
              </template> )
    }
  }
}
</script>

<style>
.container {
  background-color: white;
}
.text-color-primary {
  color: blue;
}
</style>

When I run the code in my Android using expo and SDK 40 I see the error:

01-12 14:32:59.852 21634 24134 E ReactNativeJS: TypeError: renderNavigationView is not a function. (In 'renderNavigationView()', 'renderNavigationView' is "navigationView")
01-12 14:32:59.852 21634 24134 E ReactNativeJS:
01-12 14:32:59.852 21634 24134 E ReactNativeJS: This error is located at:
01-12 14:32:59.852 21634 24134 E ReactNativeJS:     in DrawerLayoutAndroid (at createNativeWrapper.js:47)
01-12 14:32:59.852 21634 24134 E ReactNativeJS:     in NativeViewGestureHandler (at createNativeWrapper.js:46)
01-12 14:32:59.852 21634 24134 E ReactNativeJS:     in ComponentWrapper (created by ReactVueComponent)
01-12 14:32:59.852 21634 24134 E ReactNativeJS:     in ReactVueComponent (at renderApplication.js:45)
01-12 14:32:59.852 21634 24134 E ReactNativeJS:     in RCTView (at View.js:34)
01-12 14:32:59.852 21634 24134 E ReactNativeJS:     in View (at AppContainer.js:106)
01-12 14:32:59.852 21634 24134 E ReactNativeJS:     in RCTView (at View.js:34)
01-12 14:32:59.852 21634 24134 E ReactNativeJS:     in View (at AppContainer.js:132)
01-12 14:32:59.852 21634 24134 E ReactNativeJS:     in AppContainer (at renderApplication.js:39)

Some hint folks?

Answer 1

等待大神解答