Почему я не могу запустить приложение RN локально для связи с локальным сервером API? - PullRequest
0 голосов
/ 31 января 2019

У меня есть интерфейс React Native и серверная часть Rails API, и я не могу успешно войти в систему.

Когда я перезагружаю симулятор RN, я получаю следующие сообщения:

RCTBridge требуется dispatch_sync для загрузки RCTDevLoadingView.Это может привести к тупикам

Честно говоря, я не знаю, относится ли это к делу.

Ошибка, которую я знаю, имеет отношение, когда я получаю:

Сервер: TypeError: Сбой сетевого запроса

Какие шаги я могу предпринять, чтобы устранить эту проблему?

У меня есть доступ к кодовой базе как внешнего, так и внутреннего кода.

Мне интересно, если проблема в этом app/containers/LoginScreen/index.js:

import React from 'react';
import { ActivityIndicator, StatusBar, Text, View, Linking, Image, TouchableWithoutFeedback, TouchableOpacity, Platform, Keyboard } from 'react-native';
import Analytics from 'react-native-analytics-segment-io';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import _ from 'lodash';
import { Images, Colors } from '../../themes';
import { loginUser, getMeQuestions, getMeAnswers, pullOnLoadData, setLoggingIn } from '../../reducers/userReducer';
import { getModuleInfo, getLessonInfo } from '../../reducers/lessonModuleReducer';
import { FrigateButton, FrigateTextInput, HeaderBackButton, NavRightIcon } from '../../components';
import styles from './styles';

class LoginScreen extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (!nextProps.id) {
      return {};
    }
    if (nextProps.id && nextProps.lessons.length > 0 && nextProps.modules.length > 0) {
      if (!prevState.loadedData) {
        nextProps.pullOnLoadData(nextProps.id);
        if (!nextProps.signedCurrentTerms) {
          Analytics.identify('user_id', { id: nextProps.id, email: nextProps.email });
          nextProps.navigation.navigate('TOSPP');
        } else {
          Analytics.identify('user_id', { id: nextProps.id, email: nextProps.email });
          nextProps.navigation.navigate('TabNavigator');
        }
        return { ...prevState, loadedData: true };
      }
    }
    return {};
  }

  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      loadedData: false,
    };
    this.loginPressed = this.loginPressed.bind(this);
  }

  loginPressed() {
    Analytics.track('Login Pressed', { email: this.state.username });
    this.props.setLoggingIn(true);
    Keyboard.dismiss();
    this.props.login(
      this.state.username,
      this.state.password,
    );
  }

  render() {
    return (
      <View
        testID="signupScreen"
        style={styles.mainContainer}
      >
        <StatusBar barStyle="light-content" />
        <Image source={Images.background} style={styles.backgroundImage} />
        <View style={styles.brand}>
          <Image source={Images.logo} style={styles.logoImage} />
        </View>
        {!this.props.token &&
          <View style={styles.textInputs}>
            <FrigateTextInput
              onChangeText={text => this.setState({ username: text })}
              label="EMAIL"
              placeholder="EMAIL"
              value={this.state.username}
              keyboardType="email-address"
            />
            <FrigateTextInput
              onChangeText={text => this.setState({ password: text })}
              label="PASSWORD"
              placeholder="PASSWORD"
              secureTextEntry
              value={this.state.password}
            />
            <TouchableOpacity
              onPress={() => {
                // Analytics.track('Forgot Password Pressed', { email: this.state.username });
                this.props.navigation.navigate('ForgotPassword');
                // Linking.openURL('http://thirdelement.herokuapp.com/users/password/new')
              }}
            >
              <View style={{ alignItems: 'flex-end', paddingRight: 20, paddingTop: 5 }}>
                <Text style={{ color: 'white' }}>Forgot Password?</Text>
              </View>
            </TouchableOpacity>
          </View>
        }
        {this.props.token &&
          <View style={styles.activityIndicator}>
            <ActivityIndicator size="large" />
          </View>
        }
        {!this.props.token &&
          <View style={styles.actionButtons}>
            <FrigateButton
              title="Log In"
              disabled={!_.every([
                this.state.username,
                this.state.password,
              ], Boolean)}
              onPress={this.loginPressed}
            />
          </View>
        }
        {Platform.OS === 'ios' &&
          <KeyboardSpacer />
        }
      </View>
    );
  }
}

LoginScreen.propTypes = {
  login: PropTypes.func.isRequired,
  navigation: PropTypes.shape({
    goBack: PropTypes.func,
  }).isRequired,
  token: PropTypes.string,
};

LoginScreen.defaultProps = {
  token: null,
};

LoginScreen.navigationOptions = props => ({
  title: 'Welcome Back',
  headerLeft: <HeaderBackButton onPress={() => props.navigation.goBack()} />,
  headerRight: <NavRightIcon />,
  headerStyle: {
    backgroundColor: 'black',
    shadowColor: 'transparent',
    borderBottomWidth: 0,
  },
  headerTintColor: Colors.thirdElementOrange,
  headerTitleStyle: {
    fontWeight: 'bold',
  },
});


const mapStateToProps = state => ({
  email: state.user.email,
  id: state.user.id,
  token: state.user.token,
  lessons: state.lessonModules.lessons,
  modules: state.lessonModules.modules,
  signedCurrentTerms: state.user.signedCurrentTerms,
});

const mapDispatchToProps = dispatch => ({
  login: (u, p) => dispatch(loginUser(u, p)),
  getModules: () => dispatch(getModuleInfo()),
  getLessons: () => dispatch(getLessonInfo()),
  getMeQuestions: () => dispatch(getMeQuestions()),
  getMeAnswers: () => dispatch(getMeAnswers()),
  pullOnLoadData: id => dispatch(pullOnLoadData(id)),
  setLoggingIn: value => dispatch(setLoggingIn(value)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(LoginScreen);

Я вошел в Info.plist и настроил это:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

, который дал мне еще одну ошибку, похожую наэтот пост:

Что означает «URL-адрес комплекта отсутствует» в реагирующем языке?

Я попытался выполнить его предложения, выполнив следующее:

Я побежал rm -rf ios/build/; kill $(lsof -t -i:8081); react-native run-ios, но ничего не сделал.

1 Ответ

0 голосов
/ 31 января 2019

Для симуляторов Android вы должны использовать свой IP-адрес вместо localhost.Например, используйте:

fetch('http://000.000.000:3000/login', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: params,
})

Вы также должны разрешить http: // запросы.Откройте список info.plist (ProjectFolder-> ios-> ProjectFolder-> info.plist) и добавьте следующее перед:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

См .: https://stackoverflow.com/a/48946478/10987825

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