Руководство для начинающих по созданию приложения React Native

В этом руководстве мы увидим Руководство для начинающих по созданию приложения React Native. React Native позволяет создавать собственные мобильные приложения для iOS и Android без необходимости знать какое-либо программирование на iOS или Android . Я проведу вас через настройку, необходимую для разработки приложений React Native. В конце этого руководства мы просто создадим представление входа в систему для приложения iOS, так что ничего сложнее. Но мы рассмотрим первичный процесс установки. В этом приложении мы создаем приложение для iOS. Итак, компьютер с MAC — это минимальное требование.

Если вы хотите узнать больше о React Native и Redux, пройдите этот курс. Полный курс React Native и Redux

Руководство для начинающих по созданию приложения React Native.

Мы начнем наш проект с настройки среды разработки.

Настройка среды React Native.

Во-первых, нам нужно установить homebrew , чтобы без проблем установить другие зависимости на Mac .

Шаг 1. Установите Homebrew

Откройте терминал и нажмите следующую команду.

/usr/bin/ruby ​​-e "$ (curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"  

Шаг 2. Установите Watchman.

После установки homebrew нам легко извлечь другие зависимости Mac. . Введите следующий код для установки Watchman.

 brew install watchman 

Шаг 3. Установите React Native.

Теперь запустите следующий код, чтобы установить React Native глобально на вашем

 sudo npm install -g react-native-cli 

Шаг 4. Установите XCode.

Вы можете установите XCode по следующему URL-адресу: https://itunes.apple.com/us/app/xcode/id497799835

Хорошо, теперь перейдите на рабочий стол или в любую другую папку вашего проекта и создайте шаблон для нашего приложения React Native.

 react-native init AwesomeProject 

После установки проекта войдите в этот проект и запустите сервер.

 cd AwesomeProjectreact-native run-ios 

Откроется эмулятор iOS вроде этого.

Теперь мы можем открыть симуляцию iPhone lator, поскольку мы загрузили XCode и теперь можем редактировать код в файле App.js и перезагружать экран iPhone и видеть, что изменения обновлены. .

Кроме того, на нашем терминале работает один сервер разработки.

Это поможет нам перезагрузить сервер в реальном времени и тому подобное. Держите его открытым, никогда не закрывайте.

После компиляции проекта мы будем посмотрите наш основной терминал примерно так.

Теперь откройте проект в вашем любимом редакторе. Я использую Visual Studio Code. У него отличная поддержка React Native. Поэтому я также настоятельно рекомендую вам его. Если вы новичок в VS Code , проверьте из моего нижеприведенного руководства.

Связанное руководство: Как установить код Visual Studio на Mac.

Чтобы открыть наш код в Visual Studio Code . Просто введите следующую команду внутри AwesomeProject .

 code. 

Структура папок нашего приложения выглядит так, как показано ниже.

Шаг 6: Создайте папку компонентов внутри корня.

Нам нужно показать представление входа в систему, поэтому сначала w Мы создаем представление Login.js внутри папки компонентов.

Итак, давайте создадим папку components .

 mkdir componentscd components 

Внутри компонента создайте новый файл с именем Login.js.

//Login.jsimport React, {Component} из 'react'; импорт {AppRegistry, Text, View, StyleSheet, Image, TextInput} из 'react-native'; const  styles = StyleSheet.create ({image: {width: 100, height: 100, alignSelf: 'center'}, input: {height: 50, width: 200, marginTop: 30, padding: 4, fontSize: 18, borderWidth:  1, borderColor: 'green'}}); экспорт класса по умолчанию. Login extends Component {render () {return (    )}} 

Сначала я импортировал компонент React. Затем я представил некоторые элементы формы из нативного фреймворка.

Как обычный компонент React.js, компонент Login имеет render (), который выводит дизайн нашего приложения. Мы используем компоненты Text , TextInput, View и Image . Есть много других готовых компонентов, которые вы можете использовать в проекте react native . Но в этом приложении нам нужны только эти компоненты для визуализации приложения.

В React Native это то, как мы можем стилизовать конкретный элемент. Мы просто назначаем ключ этому элементу, и здесь ссылка на этот ключ касается их стилей.

Шаг 7. Импортируйте Login.js в App.js.

Если мы хотим увидеть этот дизайн внутри iPhone Simulator , нам нужно импортировать его в App.js .

//App.js/** * Образец приложения React Native * https://github.com/facebook/react-native * @flow */import React, {Component  } из 'react'; импортировать {Platform, StyleSheet, Text, View} из 'react-native'; импортировать логин из './components/Login';const instructions = Platform.select ({ios:' Нажмите Cmd + R, чтобы  reload,  n '+' Cmd + D или встряхнуть для меню разработчика ', android:' Дважды нажмите R на клавиатуре, чтобы перезагрузить,  n '+' Встряхните или нажмите кнопку меню для меню разработчика ',}); экспортировать класс по умолчанию  Приложение расширяет компонент {render () {return (  );  }} const styles = StyleSheet.create ({container: {flex: 1, paddingTop: 40, alignItems: 'center', backgroundColor: '# F5FCFF',}}); 

Теперь, после сохраняя файл, если вы откроете симулятор и перезагрузите его, вы увидите экран, как показано ниже.

Ага, мы создали представление только для входа в систему для приложения iPhone с использованием React Native .

Итак, вот как вы можете настроить среду разработки для приложения React Native. Наше Руководство для начинающих по созданию приложения React Native закончено. Спасибо, что приняли.

Оцените статью
nanomode.ru
Добавить комментарий