Question

我在使用自定义抽屉导航器时遇到问题。互联网上的所有方法都无法使用较低版本的反应导航。这是我的代码

import { createAppContainer,DrawerItems } from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';
import {SafeAreaView,ScrollView,Dimensions,View} from 'react-native';

const MyDrawerNavigator = createDrawerNavigator({ 
  Home: HomeScreen, 
  Settings: SettingsScreen,
},{
  contentComponent:CustomDrawerComponent,
}) 

const CustomDrawerComponent = (props) => {
  <SafeAreaView style={{flex:1}}>
    <View>
      <Image source={{'uri' : 'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg'}} />
    </View>
    <ScrollView>
      <DrawerItems {...props} />

    </ScrollView>
  </SafeAreaView>
}

const AppContainer = createAppContainer(MyDrawerNavigator);

export default AppContainer;

该代码无需自定义抽屉即可正常工作。但是，当我添加自定义抽屉时，侧栏上的链接不会出现。侧栏为空。

Answer 1

您需要将导入更改为从react-navigation-drawer导入。

如果您使用的是react-navigation-drawer 1.x：

import { DrawerItems } from 'react-navigation-drawer';

如果您使用的是react-navigation-drawer 2.x，请改用DrawerNavigatorItems：

import { DrawerNavigatorItems as DrawerItems } from 'react-navigation-drawer';

始终阅读官方文档：https://reactnavigation.org/docs/en/drawer-navigator.html#providing-a-custom-contentcomponent

Answer 2

代替此

class Vec(RelativeLayout):
    """ This is green area
    I want the button to disable when the green area is clicked.
    """
    def on_touch_down(self,touch):
        if self.collide_point(*touch.pos):
            App.get_running_app().root.ids.sec.ids.secbut.disabled = True

我创建了一个新的react组件

const CustomDrawerComponent = (props) => {
  <SafeAreaView style={{flex:1}}>
    <View>
      <Image source={{'uri' : 'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg'}} />
    </View>
    <ScrollView>
      <DrawerItems {...props} />

    </ScrollView>
  </SafeAreaView>
}

这有效

如何在抽屉导航器中添加自定义抽屉，反应导航4.x？

2 个答案: