Автор оригинала: Oluwagbenga Joloko.
Почему реагировать на родных
React Nature – это каркас, который позволяет создавать кроссплатформенные мобильные приложения, используя React и JavaScript. Это позволяет использовать те же компоненты на IOS и Android платформы. Компоненты пользовательского интерфейса также могут быть настроены для каждой платформы.
Что мы будем строить
Это руководство будет проходить вас через построение приложения TO-DO в реакции в области реагирования с такими функциями, как:
- Добавление нового товара на дел.
- Удаление товара на Деть.
- Маркировка товара на договор, как сделано и отменено.
Прежде чем вы начнете
Следуйте инструкциям здесь Чтобы создать свою среду реагирования нативной среды развития для вашей ОС разработки (MacOS, Windows или Linux) и целевой ОС (IOS или Android).
Используемые инструменты.
- Реагировать родной : Это будет использоваться для создания нашего мобильного приложения (iOS или Android) в JavaScript.
- Реагировать родные векторные иконки : Это содержит значки, которые будут использоваться в нашем реагирование на родном мобильном приложении.
Настройка проекта.
Перейдите к определенному каталогу на вашем компьютере и запустите следующие команды для создания нового реагирования нативный проект.
react-native init todo
Перейдите к каталогу проекта и запустите собственное приложение raction, выполнив следующую команду. Убедитесь, что у вас работает ваше виртуальное устройство или эмулятор.
cd todo react-native run-android
Если все вещи работали должным образом, у вас должен быть экран, похожий на экран, отображаемый на вашем эмуляторе или устройстве Android.
Создать SRC каталог, содержащий Компоненты и Стили подпапка.
Папка компонентов будет содержать все наши элементы реагирования, в то время как в папке стилей будет содержать все наши стили для компонентов.
mkdir -p src/{components,styles}
Добавление новых предметов
Создать todostyles.js Файл в SRC/стили каталог. Это будет содержать все стили для нашего Todo Компонент, который мы создадим позже. Добавьте код ниже в файл.
SRC/стили/ToDostyles.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
padding: 10,
backgroundColor: 'white'
},
inputContainer: {
height: 50
},
separator: {
borderBottomColor: '#d1d0d4',
borderBottomWidth: 1
}
});
export default styles;
Создать todo.js Файл в SRC/Компоненты каталог и добавьте код ниже в файл.
SRC/Компоненты/todo.js
import React, { Component } from 'react';
import { TextInput, View } from 'react-native';
import styles from '../styles/todoStyles';
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
todos: []
};
}
onSubmit = () => {
if (this.state.text) {
this.setState(prevState => ({
text: '',
todos: [...prevState.todos,
{ title: prevState.text, done: false }]
}));
this.textInput.setNativeProps({ text: '' });
}
}
render () {
return (
this.setState({ text })}
onSubmitEditing={this.onSubmit}
ref={(component) => { this.textInput = component; }}
autoFocus
/>
)
}
}
export default Todo;
todo.js Файл будет содержать большую часть нашего кода приложения. Вид Реагируйте нативный компонент действует как контейнер для других дочерних компонентов.
TextInput это компонент, который позволяет пользователю вводить текст. Onchangetext опоры на TextInput принимает функцию, которая называется каждый раз, когда текстовые изменения изменяется. this.setState ({Text}) называется в анонимной функции, передаваемой на Onchangetext опоры для изменения значения текст Недвижимость в Государство компонента тодо.
Onsubmisteding опоры на TextInput принимает функцию, которая называется каждый раз, когда текст отправлен. OnsUbmit Метод в классе TODO добавляет новый элемент TO-DO для массива Todos в состоянии и изменяет свойство текста в состояние в пустую строку. Функция обновления передается this.setState Вот потому что обновление/новое значение состояния зависит от текущего значения. Это позволяет нам всегда получить доступ к наиболее обновленной версии состояния.
А Ref был добавлен к вводу текста, чтобы позволить нам использовать СетнационныеProps реквизит для очистки ввода каждый раз, когда он подан. А Ref позволяет нам напрямую манипулировать элементами.
Заменить содержимое App.js Файл в корень каталог с кодом ниже. Это импортирует наши Todo Компоненты и оказывают это как ребенок Приложение составная часть.
App.js.
import React from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Todo from './src/components/todo';
const App = () =>
(
React Native Todo App
);
const styles = StyleSheet.create({
container: {
flex: 1
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
export default App;
Отображение наших предметов
Создать todoitemstyles.js Файл в SRC/стили каталог. Этот файл будет содержать все стили для нашего Todoitem Компонент, который мы создадим позже. Добавьте код ниже на todoitemstyles.js файл.
SRC/стили/Todoitemstyles.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: { flex: 1, flexDirection: 'row' },
text: {
flex: 1,
marginHorizontal: 10,
textAlignVertical: 'center',
fontSize: 18
}
});
export default styles;
Создать todoitem.js Файл в SRC/Компоненты каталог. Этот файл будет содержать компонент, который отобразит наши товары. Добавьте код ниже в файл.
SRC/Компоненты/Todoitem.js
import React from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import styles from '../styles/todoItemStyles';
const TodoItem = ({item}) =>
(
{item.title}
);
export default TodoItem;
Импорт нашего Todoitem Компонент в SRC/Компоненты/ToDo.js Отказ Импортируйте ассортимент NATE ELECT PLOSTLIST.
...
import { TextInput, View, FlatList } from 'react-native';
import TodoItem from '../components/todoItem'
...
Добавьте Плотник Реагируйте нативный компонент до возвращаемого значения метода Render в классе Todo в SRC/Компоненты/ToDo.js Отказ Элемент React-Ancred-action-action будет использоваться для отображения нашего списка DOS.
...
Добавьте методы ниже на Todo класс в SRC/Компоненты/ToDo.js Отказ
...
keyExtractor = (item, index) => index;
separator = () => Рендеритм Метод возвращает наши Todoitem Компонент, который отображается для каждого элемента в Тодос Массив в нашем Todo Состояние компонента. разделитель Метод возвращает компонент, который используется для разделения каждого элемента в Плотник Отказ Ключевой экстрактор рассказывает Плотник Вид на использование индекса элемента как уникальных идентификаторов каждого элемента в представлении.
Обновлено SRC/Компоненты/todo.js
import React, { Component } from 'react';
import { TextInput, View, FlatList } from 'react-native';
import TodoItem from '../components/todoItem';
import styles from '../styles/todoStyles';
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
todos: [{ title: 'test', done: false }]
};
}
onSubmit = () => {
if (this.state.text) {
this.setState(prevState => ({
text: '',
todos: [...prevState.todos,
{ title: prevState.text, done: false }]
}));
this.textInput.setNativeProps({ text: '' });
}
}
keyExtractor = (item, index) => index;
separator = () =>
this.setState({ text })}
onSubmitEditing={this.onSubmit}
ref={(component) => { this.textInput = component; }}
autoFocus
/>
);
}
}
export default Todo;
Наши делать предметы, теперь должны быть видны после того, как они будут представлены в TextInput Отказ Наше приложение на эмуляторе Android теперь выглядит так.
Удаление товаров Todo
Запустите следующую команду, чтобы установить React-Vector-Vector-Icons и связывайте его в наше приложение.
npm install --save react-native-vector-icons npm install react-native link
Нам нужно будет перезапустить заявку после этого.
react-native run-android
Добавьте метод ниже к Todo класс в SRC/Компоненты/ToDo.js Отказ Этот метод будет обрабатывать удаление элементов TO-DO из массива Todos в наших компонентах. Он фильтрует элемент массива с помощью индекса, который пропускал его как аргумент из массива Todos в состоянии.
...
onPressRemove = (index) => {
this.setState(prevState => ({
todos: prevState.todos.filter((_, i) => i !== index)
}));
}
...
Обновить Рендеритм Метод в классе Todo, чтобы включить onessremove Недвижимость на Todoitem составная часть.
...
renderItem = ({ item, index }) => (
Обновите наш todoitem.js Файл с кодом ниже.
import React from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import styles from '../styles/todoItemStyles';
import Icon from 'react-native-vector-icons/FontAwesome';
const TodoItem = ({item, index , onPressRemove}) =>
(
{item.title}
onPressRemove(index)}
>
);
export default TodoItem;
Touchablehighlight является собственным элементом реагирования, который позволяет нам обрабатывать прикосновения. Touchablehighlight Реагируйте родной элемент onpress PROP принимает функцию, которая называется каждый раз, когда она нажата. Значок От реактивно-векторных иконок позволяет использовать сотни настраиваемых значков в нашем приложении.
Сохраните все изменения и перезагрузить приложение. Наше приложение теперь должно выглядеть так. Нажав на Удалить Значок должен удалить элемент to-do.
Маркировка предметов, как сделано
Добавьте метод ниже к Todo класс в SRC/Компоненты/ToDo.js Отказ Этот метод изменит значение сделано Ключ объекта To-Do Etenter с определенным индексом для True или False и обновляет состояние нашего компонента.
...
markAsDone = (index) => {
this.setState(prevState => ({
todos: prevState.todos.map((item, i) => {
if (i === index) {
item.done = !item.done;
return item;
}
return item;
})
}));
}
...
Обновите Рендеритм Метод в Todo класс в SRC/Компоненты/ToDo.js пройти опоры Markasdone к Todoitem составная часть.
...
renderItem = ({ item, index }) => (
Обновите todoitem.js с кодом ниже.
SRC/Компоненты/Todoitem.js
import React from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import styles from '../styles/todoItemStyles';
const TodoItem = ({
item, index, onPressRemove, markAsDone
}) =>
(
markAsDone(index)}
underlayColor="white"
>
{ item.done ?
{item.title}
onPressRemove(index)}
>
);
export default TodoItem;
Второй Touchablehighlight Добавлено здесь, что используется для отмены товара на выполнением. В этом компоненте используется условный рендеринг. Это делает Check-Square-o Значок, когда товар To-Do Make помечен как сделано и отображает квадрат-о Значок, когда элемент TO-DO отмечен как отменено.
Текстовое украшение и свойство цвета Todoitem Текст также изменен в зависимости от состояния выполненного свойства товара TO-DO. Когда элемент TO-DO сделан, цвет текста серый, а текстовое украшение выложено, в противном случае текстовое украшение – нет, а цвет текста черный.
Нажав на квадрат-о Значок должен отметить товар на дел, как сделано и наоборот.
После этого наше окончательное приложение должно выглядеть так.
Заключение
Наше приложение теперь завершено! Если у вас есть какие-либо вопросы или комментарии, пожалуйста, добавьте их в раздел комментариев ниже. Полный код источника приложения можно просмотреть здесь Отказ