автор, Джон Кристи
Это всегда отличная возможность иметь в своем портфолио и навык, который клиенты оценят и заплатят за него! Не только адаптивные веб-приложения, которые хорошо смотрятся на ладони, но и вариант для реального приложения iOS или Android.
Итак, вот как вы можете превратить существующие приложения React в сенсорный значок на своем телефоне!
При превращении веб-приложения React в мобильное приложение React Native необходимо учитывать несколько важных шагов:
- Настройте среду разработки React Native. Чтобы разработать приложение React Native, вам потребуется установить и настроить необходимые инструменты и зависимости на компьютере для разработки. Это включает в себя установку Node.js, React Native CLI и мобильного эмулятора или симулятора.
- Преобразуйте свое веб-приложение в мобильное приложение: React Native использует набор компонентов и API, отличный от веб-приложения, поэтому вам потребуется изменить код вашего приложения, чтобы использовать компоненты и API React Native. Это может включать рефакторинг пользовательского интерфейса и функций вашего приложения для использования компонентов и API React Native вместо веб-технологий.
- Протестируйте свое приложение на нескольких устройствах: React Native позволяет создавать приложения, которые работают как на устройствах iOS, так и на устройствах Android, поэтому важно протестировать ваше приложение на обеих платформах, чтобы убедиться, что оно работает правильно на всех устройствах.
- Оптимизируйте свое приложение для мобильных устройств: мобильные устройства имеют другие характеристики производительности и ограничения, чем настольные компьютеры или ноутбуки, поэтому важно оптимизировать ваше приложение для мобильных устройств. Это может включать оптимизацию изображений, уменьшение размера кода и ресурсов вашего приложения, а также минимизацию использования дорогостоящих операций, таких как сетевые запросы и расчеты, интенсивно использующие ЦП.
- Опубликуйте свое приложение. Когда ваше приложение будет готово к выпуску, вам нужно будет собрать и упаковать его для распространения в App Store или Google Play Store. Этот процесс включает в себя создание списков в магазине приложений, отправку вашего приложения на проверку и управление обновлениями и выпусками.
Выполнив эти шаги, вы сможете успешно превратить свое веб-приложение React в мобильное приложение React Native. Давайте сегодня начнем с примера рефакторинга кода JavaScript в TypeScript.
Вот компонент Javascript React:
import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
const ItemList = ({ items, addItem }) => {
const [newItem, setNewItem] = useState('');
const handleChange = event => {
setNewItem(event.nativeEvent.text);
};
const handleSubmit = () => {
addItem(newItem);
setNewItem('');
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
value={newItem}
onChange={handleChange}
placeholder="Add an item"
/>
<Button title="Add" onPress={handleSubmit} />
<FlatList
style={styles.list}
data={items}
renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
keyExtractor={item => item}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginBottom: 20,
padding: 10,
},
list: {
flex: 1,
},
item: {
fontSize: 18,
},
});
const mapStateToProps = state => ({
items: state.items,
});
const mapDispatchToProps = dispatch => ({
addItem: item => dispatch({ type: 'ADD_ITEM', payload: item }),
});
export default connect(mapStateToProps, mapDispatchToProps)(ItemList);
Этот код отображает список элементов, ввод текста для добавления новых элементов и кнопку для >отправить новый элемент. Компонент также использует Redux для хранения списка элементов и обновляет список при добавлении нового элемента. Компонент также оформлен с использованием StyleSheet API.
Теперь взглянем на компонент TypeScript:
import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
interface Props {
items: string[];
addItem: (item: string) => void;
}
const ItemList: React.FC<Props> = ({ items, addItem }) => {
const [newItem, setNewItem] = useState('');
const handleChange = (event: { nativeEvent: { text: string } }) => {
setNewItem(event.nativeEvent.text);
};
const handleSubmit = () => {
addItem(newItem);
setNewItem('');
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
value={newItem}
onChange={handleChange}
placeholder="Add an item"
/>
<Button title="Add" onPress={handleSubmit} />
<FlatList
style={styles.list}
data={items}
renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
keyExtractor={item => item}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginBottom: 20,
padding: 10,
},
list: {
flex: 1,
},
item: {
fontSize: 18,
},
});
const mapStateToProps = (state: { items: string[] }) => ({
items: state.items,
});
const mapDispatchToProps = (dispatch: Function) => ({
addItem: (item: string) => dispatch({ type: 'ADD_ITEM', payload: item }),
});
export default connect(mapStateToProps, mapDispatchToProps)(ItemList);
В этом примере мы добавили информацию о типе в обработчик событий handleChange и функции mapStateToProps и mapDispatchToProps.
Мы также добавили интерфейс для свойств компонента, в котором указано, что свойство items — это массив строк, а свойство addItem — это функция, которая принимает строку в качестве аргумента и возвращает значение void.
Мы также изменили объявление компонента с function ItemList(props) на const ItemList: React.FC<Props> = (props), что указывает на то, что ItemList — это функциональный компонент React с реквизитами типа Props.
Пожалуйста, поделитесь, и если вы нашли здесь какую-то ценность, и подпишитесь на меня в Твиттере! Спасибо за чтение и дайте мне знать, если у вас есть какие-либо вопросы!
Джон Кристи
