Мы рассмотрели и закодировали router.js в последнем руководстве.

Сегодня мы начнем кодировать Login.js и style.js.

TODO Шаг 1: перейдите в папку контейнеров и создайте папки Users и Login, чтобы у вас был путь containers/ Пользователи/логин.

TODO Шаг 2. Создайте Login.js и добавьте следующий код:

import React, {Component} from 'react'; 
import { Image, StyleSheet} from 'react-native'; 
import { Font, AppLoading, Constants} from 'expo';
import { 
 Container,
 Header,
 Body,
 Title,
 Content,
 Form,
 Item,
 Input,
 Icon,
 Button,
 Text,
 Label,
 View
} from 'native-base';
import {url} from '../../../service/api/constants';
import * as api from '../../../data/user/api';
import {Field, reduxForm} from 'redux-form';
import styles from "../styles";
export default class LoginContainer extends Component {
 constructor(props) {
  super(props);
  this.state={
   isReady: false
  }
 }
componentDidMount() {
  this.loadFonts();
 }
async loadFonts() {
  await Font.loadAsync({
        'Roboto': require('native-base/Fonts/Roboto.ttf'),
        'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
     }); 
     this.setState({ isReady: true });
 }
onFacebookLogin() {
  // this.props.facebookLoginUser()
 }
}

Импорт говорит сам за себя. Все файлы внутри папок (с «../../..» — это файлы, которые мы создадим сами, поэтому они будут иметь смысл, когда вы пойдете дальше).

Загрузка приложений. Мы поговорим об этом подробнее в следующем уроке, но это то, что мы используем, когда наш экран должен загрузиться, как и было названо — загрузка приложений.

onFacebookLogin(): именно так, как это звучит. Сейчас мы просто оставим здесь его скелет. Мы заполним его позже.

Вы видите, от какого пакета мы избавимся? Там есть один лишний пакет. Давайте проверим ваш ум разработчика :).

async loadFonts() {
  await Font.loadAsync({
        'Roboto': require('native-base/Fonts/Roboto.ttf'),
        'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
     }); 
     this.setState({ isReady: true });
 }

Так что же это? Что ж, работа с Экспо не обходится без проблем, и я обнаружил, что если мне не нужны эти шрифты, Экспо выдаст мне ошибку. Итак, когда componentDidMount, мы вызываем loadFonts() и загружаем шрифты, чтобы не получить какие-либо ошибки.

Изменение Expo v32.0.0 в v33.0.0 нарушает этот код. Вы можете узнать, что это такое? Мы рассмотрим это в следующем уроке, поэтому обязательно присоединитесь к нашему списку рассылки.

Надеюсь, вы весело провели время и узнали что-то новое сегодня! Не забудьте похлопать этому посту! :)

Не любите читать? Попробуйте посмотреть видео

Свяжись со мной!

Linkedin: https://www.linkedin.com/in/donaldlee50
Instagram: https://www.instagram.com/donaldlee50/
Twitter: https://twitter. com/donaldlee50
Youtube: https://youtube.com/coursehack
Список рассылки: http://bit.ly/coursehack-mailing-list
Группа Coursehack в Facebook : bit.ly/join-coursehack-facebook-group

** Не забудьте поаплодировать и поделиться с другими разработчиками React Native & Expo!