contentComponent：CustomDrawerContentComponent 在更新到 sdk 42 后不起作用答案

【问题标题】：contentComponent: CustomDrawerContentComponent is not working after update to sdk 42contentComponent：CustomDrawerContentComponent 在更新到 sdk 42 后不起作用
【发布时间】：2021-08-30 08:01:05
【问题描述】：

我将我的 react 本机应用程序更新为 SDK 42。之后左侧导航栏无法正常工作。它仅弹出并仅显示图像。但是如果我在 createDrawerNavigator 中评论 contentComponent: CustomDrawerContentComponent 部分，则图像消失并且我的导航菜单正在显示。

我的代码

const CustomDrawerContentComponent = (props) => (
            <ScrollView>
            <Container  style={styles.container}>
                <Header style={styles.drawerHeader}>
                    <Body style={styles.headerBody}>

                    <Image
                    ref={(ref) => this.logoImgRef = ref}
                    style={{ width: 120, height: 120, marginTop:10}}
                    source={imgLogo}
                />
                    </Body>
                </Header>
                <Content>
                    <DrawerItems {...props}/>
                </Content>

            </Container>
            </ScrollView>
        )

        const DrMenu= createDrawerNavigator({

                "Home": {
                    navigationOptions: {
                        drawerIcon: () => (
                            <Icon name='home'
                                  color='#1976D2' size={26}/>
                        ),
                        title: i18n.t('home'),
                    },
                    screen: (props) => <FLHome {...props} propName={FLHome}  {...contactData}  />
                },
               
                "Logout": {
                    navigationOptions: {
                        drawerIcon: () => (
                            <Icon name='sign-out'
                                  color='#1976D2' size={26}/>
                        ),
                        title: i18n.t('logout'),
                    },
                    screen: (props) => <Logout {...props} propName={Logout} />
                },


            }, {
                initialRouteName: "Home",
                drawerPosition: 'left',
                contentComponent: CustomDrawerContentComponent,
                contentOptions: {
                    activeTintColor: '#1976D2',
                    inactiveTintColor :'#1999CE',
                    activeBackgroundColor :'#E8EAF6',
                },
                drawerOpenRoute: 'DrawerOpen',
                drawerCloseRoute: 'DrawerClose',
            }

        );
        
        const App = createAppContainer(DrMenu);
         return(           
                 <App/>
      
         ); 
    }

【问题讨论】：

标签： javascript react-native expo

【解决方案1】：

react-native 提供渲染对象的功能创建

const DateSelect = ()=>{
  return  (<DataSelect/>)
}

export default DateSelect

//import alias
import DateSelection from 'path';

//use
 render.dom
<DateSelection/>

【讨论】：

警告：函数作为 React 子级无效。如果您从渲染返回一个组件而不是，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。这个正在出现。
基于上面的警告，我给出的解决方案，看我更新的代码

【解决方案2】：

我找到了解决这个问题的方法。那就是你必须创建另一个 JS 页面并在这个页面中渲染，如下所示，

export default CustomDrawerContentComponent = props => (

    <ScrollView>
        <View style={styles.container}>
        <Image 
            source={imgLogo}
            style={{ width: 120, height: 120, marginTop:10}}
            
        />
        </View>
        

        <View>
        <DrawerNavigatorItems {...props}/>
        </View>
    </ScrollView>

);

然后就可以在 DrawerViewConfig 中这样渲染了

contentComponent:  props => <CustomDrawerContentComponent {...props} />

【讨论】：