Реквизиты не определены для contentComponent в реагирующей навигации - PullRequest
Новая
       5

Реквизиты не определены для contentComponent в реагирующей навигации

0 голосов
/ 29 июня 2019

Я пытаюсь добавить кнопку «Выйти» на своем ящике, поэтому я использовал contentComponent для того, чтобы самостоятельно создать выход из системы (а не меню другого ящика). Итак, я создал класс и пытаюсь получить DrawerItems, но он говорит, что реквизиты не определены. Пожалуйста, помогите.

Мой код Пользовательский компонент: 

 class DrawerComponent extends Component {
constructor(props) {
    super(props)
    console.log(this.props)
  }

render () {
    return (
        <View style={{flex:1}}>
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <DrawerItems {props.children} />
                <TouchableOpacity onPress={() => console.log("Pressed")}>
                    <Text>
                    Logout
                    </Text>
                </TouchableOpacity>
            </SafeAreaView>
        </View>
    );
  }
 };

Параметры моего ящика: 

 const DrawerNavigator = createDrawerNavigator({
Dashboard: {
  screen: AppStackNavigator,
  navigationOptions: {
    drawerLabel: "Home",
  }
},
Training: {
  screen: Training,
  navigationOptions: {
    drawerLabel: "Training"
  }
},
RoutePlan: {
  screen: RouteCalendar,
  navigationOptions: {
    drawerLabel: "Route Plan"
  }
},
Logout: {
  screen: StoreList,
  navigationOptions: {
    drawerLabel: "Logout"
  }
}
},
{
contentOptions: {
  activeTintColor: '#127CC1',
},
contentComponent: props => <DrawerComponent {...props}/>,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
navigationOptions : ({navigation}) => {
  const { routeName } = navigation.state.routes[navigation.state.index];
  const headerTitle = routeName;
  return {
      headerTitle,
      headerLeft: (
        <Icon name="md-menu" style={{ marginLeft: 10 }} 
        onPress={() => navigation.toggleDrawer()}
        />
      )
    }
  }
}
);

На моей странице customComponent появляется ошибка. Пожалуйста, помогите мне пройти!

1 Ответ

1 голос
/ 29 июня 2019

В вашем render методе для DrawerComponent вы звоните props.children.В этом случае props не было определено в методе рендеринга.Вы можете определить его с помощью строки типа let props = this.props в начале метода рендеринга или просто вызвать this.props вместо простого props.

Если вы используете вместо этого функциональный компонент, вы не сможетеt нужно получить props из this, и вместо этого получить его в качестве аргумента для вашего функционального компонента: 

function FooComponent(props){
  return (<div style={{color:"#F00"}}>props.children</div>)
}

ReactDOM.render(<FooComponent><em>Hi!</em></FooComponent>, targetElement)
...