В данной заметке рассмотрим одну из самых важных тем в работе с фреймворком, обратим свой взор на Компоненты . Приложение состоит из них как из кирпичиков, которые по отдельности выполняют каждый свою задачу. Очень важно еще на этапах проектирования приложения разбить его на отдельные компоненты и организовать правильно взаимодействие между ними. В приведенных для примера ниже блоках кода представлены компоненты, которые являются дочерними родительскому компоненту с классом App, последний пример в самом низу страницы.
Примеры компонентов с различным функционалом
Файл Nav.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | // Подключаем модули React и React Native import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; // Инициализируем компонент Nav const Nav = (props) => ( <View style={styles.nav}> {/* Выводим название приложения из state */} <Text>{props.nameOfApp}</Text> </View> ); // Создаем описание стилей оформления для элементов в приложении const styles = StyleSheet.create({ nav: { backgroundColor: '#eaeaea', alignItems: 'center', padding: 10, width: '100%', borderBottomWidth: 2, borderBottomColor: '#ddd' }, }); // Экспортируем компонент Nav export default Nav; |
Файл Generate.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | // Подключаем модули React и React Native import React from 'react'; import {StyleSheet, Text, View, TouchableWithoutFeedback} from 'react-native'; // Инициализируем компонент Generate const Generate = (props) => ( <TouchableWithoutFeedback // Добавляет эффект при касании кнопки onPress={() => { // По касанию кнопки запускаем метод props.add() // по сути в родительском компоненте onAddRandom() props.add() }} > {/* Кнопка Add number */} <View style={styles.generate}> <Text>Add number</Text> </View> </TouchableWithoutFeedback> ); // Создаем описание стилей оформления для элементов в приложении const styles = StyleSheet.create({ generate: { alignItems: 'center', padding: 10, backgroundColor: '#00bcd4', width: '100%', marginTop: 10, marginBottom: 5, } }); // Экспортируем компонент Generate export default Generate; |
Файл ListItem.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | // Подключаем модули React и React Native import React from 'react'; import {StyleSheet, Text, View, TouchableOpacity} from 'react-native'; // Инициализируем компонент ListItem const ListItem = (props) => { return ( // Перебираем массив props.items и выводим на странице кнопки с числами props.items.map((item, i) => ( <TouchableOpacity // Добавляет эффект при касании кнопки // По касанию кнопки запускаем метод props.delete() // по сути в родительском компоненте onItemDelete() // и удаляем выбранную кнопку onPress={ () => props.delete(i) } key={i} // Назначаем ключ каждому элементу style={styles.listitem} > {/* Кнопка текущего значения в массиве */} <View> <Text>{item}</Text> </View> </TouchableOpacity> )) ) }; // Создаем описание стилей оформления для элементов в приложении const styles = StyleSheet.create({ listitem: { backgroundColor: '#cecece', alignItems: 'center', padding: 10, width: '100%', margin: 5, } }); // Экспортируем компонент ListItem export default ListItem; |
Файл App.js – родительский компонент, к нему подключены все остальные компоненты
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | // Подключаем модули React и React Native import React, {Component} from 'react'; import {StyleSheet, View} from 'react-native'; // Подключаем компоненты import Nav from './src/Nav/Nav'; import Generate from './src/Generate/Generate'; import ListItem from './src/Generate/ListItem'; // Инициализируем класс App class App extends Component { // Инициализируем state с полями - nameOfApp, random state = { nameOfApp: 'My awesome App', // Название приложения random: [20, 14] // Массив чисел }; // Метод генерирует случайное новое значение и добавляет в state onAddRandom = () => { // Генерируем новое значение let random = Math.floor(Math.random() * 100) + 1; // Добавляем в массив random в state новое значение this.setState(prevState => { return { random: [...prevState.random, random] } }); }; // Метод удаляет выбранное значение в массиве random onItemDelete = (i) => { // Создаем новый массив в котором нет удаляемого значения let newArray = this.state.random.filter((item, index) => { return index !== i; }); // Заменяем значения массива в state на новые this.setState({random: newArray}); }; // Отправляем на рендер компоненты render() { return ( <View style={styles.container}> {/* Подключаем компонент Nav и передаем в него название приложения из state */} <Nav nameOfApp={this.state.nameOfApp}/> {/* Подключаем компонент Generate и передаем в него метод onAddRandom */} <Generate add={this.onAddRandom} /> {/* Подключаем компонент ListItem и передаем в него метод onItemDelete и массив с числами random */} <ListItem delete={this.onItemDelete} items={this.state.random} /> </View> ); } } // Создаем описание стилей оформления для элементов в приложении const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#f5fcff', }, }); // Экспортируем класс App export default App; |
Вся информация публикуемая в заметках о React Native собрана в репозитории в отдельных ветках на GitHub – https://github.com/NetWorkRoom/react-native-start