Создавайте карты и сохраняйте местоположения с помощью React Native-Redux-Navigation-Icons-MAPs - Part-III
Проверка Часть-II
Добро пожаловать в предпоследнюю часть этой статьи.
В предыдущей части я сосредоточился на Redux. Я объяснил это в целом, затем пояснил его структуру, поддерживая это с помощью изображения, чтобы сделать его более ясным. Затем я закончил его, показав, как установить redux и как я использовал его в приложении.
В первой части я говорил о react-native-navigation Lib. Это означает, что теперь мы знаем об этом и о redux,, так что я думаю, что настало время сделать еще один шаг в нашем код проекта о том, как мы используем react-native-navigation Lib, как мы создаем экраны и как связать все это с помощью redux.
Готовый! Пойдем…
1. Экраны:
Вы помните из первой части статьи, что в нашем приложении два экрана, один предназначался для отображения карты, а другой - для отображения списка мест, которые сохраняет пользователь. Ну, я хочу начать со второго экрана.
Что такое экран в react native? Итак, экран в react native - это просто класс. Мы просто создаем класс, как любой другой создаваемый нами класс. Мы помещаем в этот класс то, что хотим отобразить на экране, например, если мы хотим отобразить текстовое поле и кнопку, мы вставляем тег ‹TextInput /› и ‹Button / › и при отображении экрана эти два появятся на нем. После написания кода класса нам нужно сообщить react-native-navigation, что этот класс будет использоваться в качестве экрана, поэтому держите его при себе.
Помните: react-native-navigation lib сначала регистрирует все экраны, а затем, когда экран нужен, он вызывает его по уникальному имени.
Итак, что нам нужно сделать сейчас, так это создать класс экрана списка элементов и затем зарегистрировать его в response-native-navigation.
Этот класс настолько прост, что его работа заключается в отображении списка мест, поэтому он просто вызывает компонент LocationList, который мы создали в первой части. Вызвать предопределенный компонент просто, он используется как самозакрывающийся тег. Прежде чем перейти к коду этого класса, я хочу вспомнить полный код компонента «LocationList».
* LocationList.js,
import React from 'react';
import { FlatList, StyleSheet } from 'react-native';
import ListItem from '../ListItem/ListItem';
const LocationList = props => {
return (
<FlatList
style={styles.listContainer}
data={props.locations}
renderItem={(info) => (
<ListItem
placeName={info.item.placeName}
placeLocation={info.item.location}
onItemDeleted={() => props.onItemSelected(info.item.key)}
/>
)}
/>
);
};
const styles = StyleSheet.create({
listContainer: {
width: "100%"
}
});
export default LocationList;
В этой строке кода
onItemDeleted={() => props.onItemSelected(info.item.key)}
компонент получает ключ элемента, который пользователь хочет удалить. Он получает его из компонента «ListItem.js», когда пользователь нажимает кнопку удаления. Затем мы получим этот ключ на экране списка мест, чтобы удалить этот конкретный элемент. Имейте в виду, что ключ не будет получен, пока пользователь не нажмет кнопку удаления.
Теперь давайте посмотрим на код экрана со списком мест.
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import LocationList from '../../components/LocationList/LocationList';
class Places extends Component {
render() {
return (
<View style={styles.container}>
<LocationList
locations={this.props.locations}
onItemSelected={this.placeDeletedHandler}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 5
}
});
export default Places;
Я назвал это местами. Мы видим, что он импортирует компонент LocationList, чтобы использовать его. Затем он вызывает его, поскольку тег отправляет массив location компоненту для отображения элементов, находящихся внутри него. Помните, что мы сохраняем места в массиве locations, который находится в redux. А также он получает ключ элемента, который мы хотим удалить, если он существует в этой строке кода,
onItemSelected={this.placeDeletedHandler}
Итак, массив location происходит от redux, а элемент key должен перейти в redux, чтобы обновить состояние, но как мы это делаем.
Для этого нам нужно подключить этот класс к redux, и мы сделаем это следующим образом:
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import LocationList from '../../components/LocationList/LocationList';
import { connect } from 'react-redux';
import { deletePlaces } from '../../store/actions/index';
class Places extends Component {
placeDeletedHandler = (key) => {
this.props.onDeletePlace(key);
}
render() {
return (
<View style={styles.container}>
<LocationList
locations={this.props.locations}
onItemSelected={this.placeDeletedHandler}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 5
}
});
const mapStateToProps = state => {
return {
locations: state.locationsList.locations
};
};
const mapDispatchToProps = dispatch => {
return {
onDeletePlace: (key) => dispatch(deletePlaces(key))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Places);
Я снова переписываю код класса, чтобы связать его с redux. Ну как подключение делается?
Прежде всего нам нужно импортировать свойство connect из react-redux, которое мы установили ранее. в предыдущей части и из его названия connect - это функция, используемая для соединения с redux.
Еще мы делаем две функции после класса. Одна из этих двух функций - получить переменные из состояния, которое находится в redux , а второй - поговорить с действиями, которые мы создали в redux .
Давайте посмотрим на первый,
const mapStateToProps = state => {
return {
locations: state.locationsList.locations
};
};
название функции зависит от вас, я дал ей имя «mapStateToProps», она получает состояние как параметр. В предыдущей части мы только объявляли массив в состоянии в redux, и здесь он нам нужен для отправки его в компонент LocationList. Итак, мы говорим «state.locationsList.locations», вы видите locatoinList, это редуктор, который мы создали в redux. А теперь мы знаем из redux, что redux напрямую связывается с магазином, где наш состояние находится. Итак, в строке кода выше мы говорим reducer: «Эй, мне нужно, чтобы вы дали мне массив location из состояние ”, а затем мы назначаем его массиву новых местоположений, чтобы использовать его в нашем классе.
Теперь о второй функции,
const mapDispatchToProps = dispatch => {
return {
onDeletePlace: (key) => dispatch(deletePlaces(key))
};
};
эта функция используется для отправки действий. Единственное действие, которое мы используем на экране списка мест, - это действие удаления, поэтому мы вызываем только функцию этого действия.
Чтобы вызвать функцию действия, мы используем эту строку кода,
onDeletePlace: (key) => dispatch(deletePlaces(key))
мы говорим отправить конкретное действие, которое мы хотим вызвать, и дать ему параметры, если они есть. И чтобы иметь возможность взаимодействовать с этим действием изнутри класса, мы назначаем ему новое имя функции, чтобы оно стало ее «представителем». Еще одна важная вещь, о которой мы должны знать, - это нам нужно импортировать действие, которое мы хотим использовать, из index файл из redux,
import { deletePlaces } from '../../store/actions/index';
Затем мы можем легко вызвать действие внутри класса, посмотрите на это,
placeDeletedHandler = (key) => {
this.props.onDeletePlace(key);
}
после того, как мы присвоили действие «onDeletePlace», мы используем его, как указано выше, для запуска этого действия. Таким образом, приведенная выше строка кода вызывает действие удаления и дает ему ключ элемента, который мы хотим удалить. Затем это действие переводит ключ в redux и оттуда он получает редуктор, через который ключ поступает в хранилище и место, где ключ эквивалентен следующему ключу удален.
Все, что я сказал в последнем абзаце, мы сделали в redux. Если вы отметите функции reducer и action, вы все это увидите, помните, что это было просто.
Итак, пока мы закончим экран со списком мест и привяжем его к некоторым частям redux, «которые нам нужны», так что давайте теперь зарегистрируем этот экран на react-native-navigation.
2. Экран и response-native-navigation:
Что мы собираемся сделать здесь, так это зарегистрировать экран для response-native-navigation, а также обернуть все приложение тегом redux, и так наше приложение полностью подключено к redux. Посмотрим код,
import { Navigation } from 'react-native-navigation';
import {Provider} from 'react-redux';
import PlacesScreen from './src/screens/Places/Places';
import configureStore from './src/store/configureStore';
const store = configureStore();
//Register screens
Navigation.registerComponent("pick-places.PlacesScreen",
() => PlacesScreen,
store,
Provider
);
//Start an App
Navigation.startSingleScreenApp({
screen: {
screen: "pick-places.PlacesScreen",
title: "Place List"
}
});
Итак, мы пишем этот код внутри файла App.js.
Сначала мы импортируем свойство Navigation из react-native-navigation lib. Затем мы импортируем свойство Provider из react-redux lib, с помощью которого мы заключаем приложение в оболочку редукс. Затем мы импортируем экраны, которые хотим зарегистрировать при навигации. А также мы импортируем configureStore, который является хранилищем redux.
После этого первым делом мы реализуем configureStore. Затем мы регистрируем экраны с помощью функции registerComponent из навигации.
Navigation.registerComponent("pick-places.PlacesScreen",
() => PlacesScreen,
store,
Provider
);
при регистрации экрана мы назначаем четыре параметра, первый - уникальное имя экрана, второй - класс экрана, третий - хранилище redux, а последний - провайдер для обертывания это с redux, потому что мы используем состояние в этом классе.
После этого мы должны указать response-native-navigation, с какого экрана начинать. Итак, мы используем это,
Navigation.startSingleScreenApp({
screen: {
screen: "pick-places.PlacesScreen",
title: "Place List"
}
});
Здесь приведены два параметра: один - это экранное имя, а другой - имя, которое мы хотим отображать над экраном в приложении.
До сих пор мы подключаем экран к состоянию и действиям, затем регистрируем его для навигации и оборачиваем все это с помощью redux.
На этом мы подошли к концу этой части, надеюсь, она вам понравилась и она вам понравилась.
Готовьтесь к самому интересному, чему я лично в восторге. Он будет полностью посвящен КАРТАМ, начиная с установки его библиотеки и до ее использования и вставки в любое приложение, а также о проблемах, с которыми мы можем столкнуться при ее использовании, и способах их решения. Я очень взволнован 💪🏻🤓
Помните: полный код и окончательное рабочее приложение будут опубликованы вместе с вами в финальной части.
