Actualicé mi aplicación nativa de reacción a SDK 42. Después de eso, la barra de navegación izquierda no funciona. solo aparece y muestra solo la imagen. pero si comento contentComponent: CustomDrawerContentComponent parte en createDrawerNavigator, la imagen desaparece y se muestran mis menús de navegación.
Mi código
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/> ); }react-native proporciona la creación funcional de objetos de renderizado
const DateSelect = ()=>{ return (<DataSelect/>) } export default DateSelect //import alias import DateSelection from 'path'; //use render.dom <DateSelection/>Encontré una solución para este problema. Es decir, debe crear otra página JS y renderizar en esta página como esta a continuación,
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> );Entonces puedes renderizar de esta manera en DrawerViewConfig
contentComponent: props => <CustomDrawerContentComponent {...props} />