Функция React Native call из навигации
Я использую нативную навигацию React. (Навигация по стеку). Но я не могу вызвать функцию в navigationOptions. Не работает.
import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableHighlight, AsyncStorage, Alert } from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import HandleBack from '../../HandleBack';
export default class Dashboard extends Component {
constructor(props) {
super(props);
}
static navigationOptions = ({ navigation }) => {
return {
title: 'Dasboard',
headerLeft: null,
headerRight: (
<TouchableHighlight underlayColor='transparent' onPress = {this.login.bind(this)} style = {{marginRight: 10}}>
<Icon
name = "power-off"
size = {25}
color = "white"
/>
</TouchableHighlight>
)
};
};
login() {
alert('Button clicked!');
}
onBack = () => {
this.props.navigation.navigate('Screen3');
};
render() {
return(
<HandleBack onBack = { this.onBack }>
<View>
<Text> This is screen 2 </Text>
<TouchableHighlight onPress = {() => this.props.navigation.navigate('Screen3')}>
<Text> Go to Screen 3 </Text>
</TouchableHighlight>
</View>
</HandleBack>
)
}
}
Когда я использую onPress = {this.login.bind(this)} получаю ошибку
"TypeError: TypeError: undefined не является объектом (оценка '_class.login.bind')"
Когда я использую onPress = {this.login} никакой реакции.
Когда я использую onPress = {this.login()} получаю ошибку
TypeError: TypeError: _class.login не является функцией.
Но
Я использую onPress = {() => alert('test')} работает.
Тогда navigationOptions не работает.
у вас никогда не будет контекста this внутри функции static, если вы не передадите его явно
Это ошибка или ошибка реактивной нативной навигации.
кстати куда ты звонишь navigationOptions
вот как работает любое статическое ключевое слово на любом языке, если вы можете сказать, где именно вы вызываете эту функцию, возможно, я смогу чем-то помочь
Как мне найти здесь функцию? Это необходимо.
@ warl0ck Это говорит код выше.
Я имел в виду, где вы вызываете эту функцию navigationOptions?
Нет, я не могу вызвать
что вы хотите сделать в этой функции? @Dodiş, если вы хотите перенаправить на любой экран, вы можете напрямую использовать параметры навигации.
В чем польза и назначение navigationOptions куда вы его называете и расскажите почему без него нельзя static
@PatelDhara Нет. Я проверю токен. Затем процесс выхода.
Я думаю, вы используете «реагирующую навигацию», а не «реагирующую нативную навигацию». И если это так, то здесь уже есть ответ на этот тип вопроса: stackoverflow.com/questions/54058740/…
Вы правы Спасибо. @АнкитМаквана
@Dodiş На самом деле это очень хорошо задокументировано на reactnavigation.org/docs/en/….
@AnkitMakwana Да, мне нужно читать внимательнее. Ты прав. Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
navigationOptions должен быть статическим, потому что это один экземпляр для всего компонента, и вы пытаетесь получить доступ к «методу экземпляра» ((this.login)) из статического поля... и это не сработает...
насколько я понимаю, вы пытаетесь создать «CustomHeader», поэтому я предлагаю:
- вы создаете отдельный компонент для своего пользовательского заголовка и передаете этот метод входа в качестве реквизита.
- Отключите заголовок по умолчанию, добавив заголовок: null в navigationOptions.
Визуализируйте этот пользовательский компонент заголовка вручную.
Чтобы отключить заголовок по умолчанию:
const NavigatorConfig = { navigationOptions: { header: null, }, };createStackNavigator(RouteConfigs, NavigatorConfig);
создать собственный заголовок:
const MyCustomHeader = ({навигация, вход в систему}) => { вернуть (); };
- Визуализируйте этот настраиваемый заголовок вручную на всех экранах, на которых он должен быть.
Нет, у меня есть собственный заголовок. Я пытаюсь вызвать функции в пользовательском заголовке.
вы можете добиться этого, используя setParams или getParams для навигации по реакции.
export default class Dashboard extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Dasboard',
headerLeft: null,
headerRight: (
<TouchableHighlight underlayColor='transparent'
onPress = {navigation.getParam('login')} //call that function in onPress using getParam which we already set in componentDidMount
style = {{marginRight: 10}}>
<Icon
name = "power-off"
size = {25}
color = "white"
/>
</TouchableHighlight>
)
};
};
login() {
alert('login click')
}
onBack = () => {
this.props.navigation.navigate('Screen3');
};
componentDidMount() {
this.props.navigation.setParams({ login: this.login }); //initialize your function
}
render() {
return(
.....
)
}
}
вы можете рассмотреть эту тему stackoverflow.com/questions/57725635/… и сказать мне, что я делаю неправильно!
Попробуйте удалить
static