Question

我目前正在尝试实现自定义组件以显示我的图标。渲染时没有错误，但屏幕列表中的2没有显示。我需要做一些样式设计还是我的代码有问题

如果有人可以检查我的代码，那真棒

这是我的代码

App.js

import React from 'react';
import { 
    StyleSheet,
    View,
    SafeAreaView,
    ScrollView,
    Dimensions,
    Image,
    Text
 } from 'react-native';
import {
     createDrawerNavigator,
     DrawerItems
    } from 'react-navigation';
import HomeScreen from './screen/HomeScreen';
import SettingsScreen from './screen/SettingsScreen';


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

const CustomDrawerComponent = ( props ) => (
    <SafeAreaView style={{flex: 1}}>
        <ScrollView>
             <View style={{height:150,backgroundColor:'white',alignItems: 'center', justifyContent: 'center' }}>
                 <Image 
                 source={require('./img/cs.png')} 
                 style={{height:120, width:120, borderRadius: 20}}
                 />
             </View>
        </ScrollView>
    </SafeAreaView>
)

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

})

const styles = StyleSheet.create({
    container: {
        flex: 0,
        color: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

Homescreen.js

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';

class HomeScreen extends Component {
    render () {
        return (
            <View style={styles.container}>
            <Text>Home</Text> 
        </View>
        );
    }
}

export default HomeScreen ;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        color: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

Answer 1

根据官方文档，您的Drawer Navigator必须定义为：

const AppDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Settings: {
    screen: SettingsScreen,
  }
});

您没有为每个自定义屏幕分配带有道具screen的对象。有关更多详细信息，请查看doc。

Answer 2

据我了解，您需要将DrawerItems添加到抽屉中。

  

 import { DrawerItems, SafeAreaView } from 'react-navigation';
   const CustomDrawerComponent = ( props ) => (
    <SafeAreaView style={{flex: 1}}>
        <ScrollView>
             <View style={{height:150,backgroundColor:'white',alignItems: 'center', justifyContent: 'center' }}>
                 <Image 
                 source={require('./img/cs.png')} 
                 style={{height:120, width:120, borderRadius: 20}}
                 />
            
             </View>
           <DrawerItems {...props} />
        </ScrollView>
    </SafeAreaView>
)

自定义React抽屉导航

2 个答案: