В прошлой заметке мы начали рассматривать элементы разметки приложений и в этот раз посмотрим еще на некоторые из них <ScrollView>, <Picker>, <ActivityIndicator> и <Slider> . <ScrollView> – служит оберткой для контента и если контент имеет больший размер, чем размеры экрана устройства, он позволяет скролить контент. <Picker> – создает на странице элемент напоминающий обычный тег select в HTML. <ActivityIndicator> – отображает на странице классический прелоадер в виде вращающегося разорванного круга. <Slider> – создает на странице ползунок, двигая который можно менять значение необходимого параметра. В блоках кода ниже можно увидеть как данные модули используются в работе.
Пример с использованием элементов из React Native – ScrollView
Файл 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | // Подключаем модули React и React Native import React, {Component} from 'react'; import {StyleSheet, View, ScrollView} from 'react-native'; // Подключаем компоненты import Nav from './src/Nav/Nav'; import Generate from './src/Generate/Generate'; import ListItem from './src/Generate/ListItem'; import Input from './src/Input/Input'; // Инициализируем класс App class App extends Component { // Инициализируем state с полями - nameOfApp, random state = { nameOfApp: 'My awesome App', // Название приложения random: [20, 14] // Массив чисел }; // Метод генерирует случайное новое значение и добавляет в state onAddRandom = () => { // alert('add random') // Генерируем новое значение let random = Math.floor(Math.random() * 100) + 1; // Добавляем в массив random в state новое значение this.setState(prevState => { return { random: [...prevState.random, random] } }); }; // Метод удаляет выбранное значение в массиве random onItemDelete = (i) => { // alert('delete item'); // alert(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}/> {/* Оборачиваем контент ScrollView для получения возможности скролить контент на странице */} <ScrollView // onContentSizeChange={(w,h) => alert(h)} // Срабатывает при изменении размера // onMomentumScrollBegin={() => alert('begin')} // Срабатывает при начале скролинга // onMomentumScrollEnd={() => alert('end')} // Срабатывает после окончания скролинга onScroll={() => alert('scrolling')} style={{width: '100%'}} > <View style={styles.wrapper}> {/* Подключаем компонент Generate и передаем в него метод onAddRandom */} <Generate add={this.onAddRandom} /> {/* Подключаем компонент ListItem и передаем в него метод onItemDelete и массив с числами random */} <ListItem delete={this.onItemDelete} items={this.state.random} /> <Input/> </View> </ScrollView> </View> ); } } // Создаем описание стилей оформления для элементов в приложении const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#f5fcff', }, wrapper: { flex:1, width: '100%', padding: 20, justifyContent: 'flex-start', alignItems: 'center' } }); // Экспортируем класс App export default App; |
Пример с использованием элементов из React Native – Picker и Slider
Файл Picker.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 | // Подключаем модули React и React Native import React, { Component } from 'react'; import {StyleSheet, Text, View, Picker, Slider} from 'react-native'; class PickerComponent extends Component { state = { language: 'english', // Значение по умолчанию в Picker sliderValue: 0 // Значение по умолчанию в Slider }; render() { return ( <View style={{width: '100%'}}> {/* Picker позволяет менять значение из набора значений */} <Picker style={{width: '100%'}} selectedValue={this.state.language} // Значение по умолчанию // Меняем на выбранное значение onValueChange={(value, index) => this.setState({language: value})} > {/* Список значений */} <Picker.Item label="Spanish" value="spanish" /> <Picker.Item label="English" value="english" /> </Picker> {/* Slider позволяет менять значение из диапазон значений */} <Slider style={{width: '100%'}} minimumValue={0} // Минимально допустимое значение maximumValue={50} // Максимально допустимое значение value={this.state.sliderValue} // Значение по умолчанию // Меняем текущее значение двигая ползунок onValueChange={(value)=> this.setState({ sliderValue: Math.round(value)})} /> {/* Выводим текущее значение в Slider */} <Text>Value: {this.state.sliderValue}</Text> </View> ) } } // Создаем описание стилей оформления для элементов в приложении const styles = StyleSheet.create({ }); // Экспортируем компонент PickerComponent export default PickerComponent; |
Пример с использованием элементов из React Native – ActivityIndicator
Файл 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | // Подключаем модули React и React Native import React, {Component} from 'react'; import {StyleSheet, View, ScrollView, ActivityIndicator} from 'react-native'; // Подключаем компоненты import Nav from './src/Nav/Nav'; import Generate from './src/Generate/Generate'; import ListItem from './src/Generate/ListItem'; import Input from './src/Input/Input'; import PickerComponent from './src/Picker/Picker'; // Инициализируем класс App class App extends Component { // Инициализируем state с полями - nameOfApp, random state = { nameOfApp: 'My awesome App', // Название приложения random: [20, 14], // Массив чисел loading: false }; // Метод генерирует случайное новое значение и добавляет в state onAddRandom = () => { // alert('add random') // Генерируем новое значение let random = Math.floor(Math.random() * 100) + 1; // Добавляем в массив random в state новое значение this.setState(prevState => { return { random: [...prevState.random, random] } }); }; // Метод удаляет выбранное значение в массиве random onItemDelete = (i) => { // alert('delete item'); // alert(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}/> {/* Оборачиваем контент ScrollView для получения возможности прокручивать контент на странице */} <ScrollView // onContentSizeChange={(w,h) => alert(h)} // Срабатывает при изменении размера // onMomentumScrollBegin={() => alert('begin')} // Срабатывает при начале скролинга // onMomentumScrollEnd={() => alert('end')} // Срабатывает после окончания скролинга onScroll={() => alert('scrolling')} style={{width: '100%'}} > <View style={styles.wrapper}> {/* Подключаем компонент Generate и передаем в него метод onAddRandom */} <Generate add={this.onAddRandom} /> {/* Подключаем компонент ListItem и передаем в него метод onItemDelete и массив с числами random */} <ListItem delete={this.onItemDelete} items={this.state.random} /> {/*<Input/>*/} <PickerComponent /> <ActivityIndicator size="large" color="red" animating={this.state.loading} /> </View> </ScrollView> </View> ); } } // Создаем описание стилей оформления для элементов в приложении const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#f5fcff', }, wrapper: { flex:1, width: '100%', padding: 20, justifyContent: 'flex-start', alignItems: 'center' } }); // Экспортируем класс App export default App; |
Вся информация публикуемая в заметках о React Native собрана в репозитории в отдельных ветках на GitHub – https://github.com/NetWorkRoom/react-native-start