Как подключить компонент React в React Navigation?
Я создал модальное окно в react native. Я добавил значок параметра фильтра в верхнем правом углу, теперь, когда пользователь нажимает на него, должно открываться модальное окно. Как я могу это сделать ? Я добавил значок параметров в navigation.js, но как теперь связать его с модальным компонентом?
В приведенном ниже коде setModalVisible доступен в filteroptions.js, а не в navigation.js.
Код:
navigation.js:
Updates: {
screen: UpdatesScreen,
navigationOptions: ({ navigation }) => ({
headerTitle: 'Myapp',
headerRight:<TouchableOpacity onPress = {() => {this.setModalVisible(true);}}>
<MenuIcon style = {{paddingLeft: 10, paddingRight: 15}} name = "md-options" size = {25} color = "white"/>
</TouchableOpacity>,
})
},
filteroptions.js:
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';
export default class FilteroptionsModel extends Component {
state = {
modalVisible: false,
};
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style = {{marginTop: 22}}>
<Modal
animationType = "slide"
transparent = {false}
visible = {this.state.modalVisible}
onRequestClose = {() => {
Alert.alert('Modal has been closed.');
}}>
<View style = {{marginTop: 22}}>
<View>
<TouchableHighlight
onPress = {() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
);
}
}
Когда пользователь нажимает кнопку фильтра в правом верхнем углу (см. Снимок экрана), он должен увидеть на экране модальное окно:
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поскольку это модальное окно, вам не обязательно добавлять его в навигацию. Вы можете просто включить его на свою страницу и изначально сделать его невидимым, а затем, когда пользователь нажимает вашу кнопку, вы можете сделать модальное окно видимым. Но если вы хотите добавить его в навигацию, почему бы просто не добавить, как любой другой компонент. Однако добавление его в навигацию приведет вас к другой странице при переходе к компоненту. Конечно, вы можете добавить вложенный навигатор, чтобы обойти это, но я думаю, что это добавляет ненужной сложности.
Обновлять
Сначала вы объявите компонент Header.
export default class MyHeader extends React.PureComponent {
render() {
<View>
<View>...Your left Icon here</View>
<View>...Your Title here</View>
<View>...Your right Icon Here</View>
</View>
}
}
Затем на своей странице вы сначала визуализируете этот компонент, передадите в качестве реквизита ваши обработчики, а затем визуализируете остальную часть страницы.
export default class MyPage extends React.PureComponent {
yourRigthHandler = () => {
this.setState({modaVisible: true});
}
yourLeftHandler = () => {....}
render() {
<View>
<MyHeader
LeftHandler = {yourLeftHandler}
LeftHandler = {yourRigthHandler}>
....
</MyHeader>
</View>
}
}
внутри обработчиков вы можете вызывать функции навигации, чтобы перейти на другую страницу или изменить состояние компонентов, чтобы сделать моду видимым. Обработчики будут переданы как реквизиты в ваш заголовок, и вы добавите их как обработчики onPress к своим кнопкам.
Поскольку кнопка находится в навигаторе, вам необходимо добавить обработчик, когда пользователь нажимает кнопку, чтобы сообщить вам модальное окно, чтобы оно стало видимым. Они не могут напрямую общаться, поэтому я полагаю, вы можете сделать это через свое глобальное состояние. Хотя это могло сработать, я не думаю, что это лучшее решение. Этот github.com/react-navigation/react-navigation/issues/… предлагает другой подход.
Итак, вы говорите, что я должен создать отдельный экран для модального окна, а затем я должен подключить его с помощью stacknavigator, это правильно?
Этот вариант предлагается на GitHub. Но я бы сделал так, чтобы модальный поворот был видимым / невидимым, когда пользователь нажимает кнопку на навигаторе.
Тогда, если я буду следовать вашему подходу, как я добавлю этот значок в навигацию по заголовку? Можно ли добавить значок подключения и модальное окно из двух разных файлов?
Если они находятся в разных файлах, вы не можете получить доступ к состоянию одного из другого. Для этого вам нужно будет использовать какое-то глобальное состояние, что на самом деле не является правильным подходом. Если вы не хотите использовать для этого глобальное состояние, вы можете создать собственный заголовок вместо использования заголовка навигатора, таким образом вы можете передать обратный вызов и изменить состояние компонентов.
Можете ли вы добавить, что в своем ответе я не мог понять, как это реализовать -> you can create a custom header instead of using the navigator's header, that way you can pass your callback and change the components state
Но я добавил значок в navigation.js, то есть
headerRight: Icon, теперь, щелкнув, должно открыться модальное окно, как я могу это сделать? модальное окно находится внутри другого файла. Поэтому я не могу реализовать блочное модальное окно в navigation.js. Как мне его подключить?