Undefined не является объектом this2.props.navigation.navigate
Я не могу перейти на другую страницу. У меня есть код класса по умолчанию в этом классе навигация работает нормально
export default class ClassName1 extends React.Component {
constructor(props) {
super(props);
}
}
но когда я вызываю this.props.navigation в классе ниже, он выдает ошибку
class ClassName2 extends React.Component {
constructor(props) {
super(props);
}
}
вот так я вызываю функцию в ClassName2
<TouchableOpacity onPress = {() => this.props.navigation.navigate("Report") }>
<Text style = {style.modalContainerText}>
inappropriate Content
</Text>
</TouchableOpacity>
оба класса находятся в одном файле.
Возможный дубликат React Native - проблема с навигацией «undefined не является объектом (this.props.navigation.navigate)»
Ответы 2
Это не совсем понятно из вашего вопроса, но я думаю, вы используете ClassName2 вот так внутри ClassName1 (конечно, с некоторыми другими компонентами и конструктором):
class ClassName1 extends React.Component {
render() {
return <ClassName2 />
}
}
Теперь я предполагаю, что вы используете ClassName1 как маршрут с реактивной навигацией. Компонент ClassName1 автоматически получает реквизит this.props.navigation с помощью реактивной навигации. Чтобы передать его элементу ClassName2, чтобы он также мог вызывать навигацию, было бы так:
class ClassName1 extends React.Component {
render() {
return <ClassName2 navigation = {this.props.navigation} />
}
}
Однако это основано на догадках, поэтому дайте мне знать, решит ли это вашу проблему. Если это так, я обновлю ваш вопрос, чтобы предоставить информацию, которая лучше описывает вашу проблему :)
это сработало! но, применив это к рендеру, он не выполнил код ниже и не вернулся.
Вам нужно заменить <ClassName2 /> внутри оригинального рендера на <ClassName2 navigation = {this.props.navigation} /> :)
Если ваш класс включен в функцию StackNavigator, у вас будет доступ к this.props.navigation, если нет, вам нужно использовать функцию withNavigation, как показано ниже.
Пример использования StackNavigator
import React, { Component } from 'react';
import { Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
export class ClassName2 extends Component {
render() {
return <Button title = "This will work" onPress = {() => { this.props.navigation.navigate('someScreen') }} />;
}
}
export const myStackNavigator = StackNavigator({
myScreen: ClassName2
})
Пример использования withNavigation
import React, { Component } from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';
class ClassName2 extends Component {
render() {
return <Button title = "This will work" onPress = {() => { this.props.navigation.navigate('someScreen') }} />;
}
}
export default withNavigation(ClassName2);
при использовании withNavigation он выдает синтаксическую ошибку ошибки: разрешен только один экспорт по умолчанию для каждого модуля. потому что я уже использую ClassName1 в качестве экспорта и по умолчанию
@talhaabdulhameed не копируйте и не вставляйте этот код, это просто пример.
ClassName2 используется внутри ClassName1? если это так, вы можете использовать его так <ClassName2 navigation = {this.props.navigation} /> в противном случае замените экспорт по умолчанию на именованный экспорт
ваши экраны должны быть в стеке, вкладке или навигаторе ящиков, чтобы вы могли перемещаться