我有一个React Native前端和一个Rails API后端，我似乎无法成功登录。
当我重新加载RN模拟器时，确实收到以下消息：
RCTBridge需要load_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>
这给了我另一个类似于这篇文章的错误：
What is the meaning of 'No bundle URL present' in react-native?
我尝试通过以下方式遵循其建议：
我跑了rm -rf ios/build/; kill $(lsof -t -i:8081); react-native run-ios，但是什么也没做。
答案 0 :(得分：0)
对于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>