react-native-login-redux
项目地址如下
https://github.com/agunbuhori/react-native-login-redux
先看页面
```js
// 还有中英文切换
//src/global.js
import Theme from './styles/Theme';
import Auth from './auth/Auth';
import i18n from 'react-native-i18n';
import en from './localizations/en';
i18n.translations = {
en: en
}
export { Theme, Auth, i18n }
```js
//根app
//app.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from 'react';
import { Platform, StyleSheet } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './src/reducers/rootReducer';
//多语言切换
import { Auth } from './src/global';
const store = createStore(rootReducer);
import AuthNavigator from './src/navigators/AuthNavigator';
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
status: 0
}
}
componentDidMount() {
this.checkAuth();
this.checkReduxAuth();
}
async checkAuth() {
const authenticated = await Auth.checkAuth();
if (authenticated)
this.setState({status: 2});
else
this.setState({status: 1});
}
checkReduxAuth() {
store.subscribe(() => {
let authentication = store.getState().authentication;
if (authentication.authenticated)
this.setState({ status: 2 });
else
this.setState({ status: 1 });
});
}
// 根据renderApp进行判断
renderApp() {
switch (this.state.status) {
case 1:
return <AuthNavigator/>
break;
case 2:
return null;
break;
default:
return null;
}
}
render() {
return (
<Provider store={store}>
{this.renderApp()}
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
//login.js
import React, { Component } from 'react';
import { ActivityIndicator, KeyboardAvoidingView, AsyncStorage } from 'react-native';
import { connect } from 'react-redux';
import { StyleSheet } from 'react-native';
import { Form, Button, Text, View, Container, Item, Input, Icon } from 'native-base';
import { Theme, i18n, Auth } from '../../global';
import { loginSuccess } from '../../actions/authentication';
import Image from 'react-native-scalable-image';
class Login extends Component {
state = {
loginProgress: false,
username: null,
password: null,
authentication: {
authenticated: false
}
}
componentDidMount() {
}
async login() {
this.setState({loginProgress: true});
const login = await Auth.login({username: this.state.username, password: this.state.password});
if (login.token) {
Auth.setAuthToken(login.token, this.state.username, this.state.password);
this.props.onLogin({authenticated: true});
}
}
renderLogo() {
return (
<View style={Theme.mb2}>
<Image source={require('../../assets/images/logo.png')} width={150} />
<Image source={require('../../assets/images/akari.png')} width={130} />
</View>
);
}
renderForm() {
return (
<Form style={styles.loginForm}>
<Item regular style={styles.loginInput}>
<Icon type="AntDesign" name="user"/>
<Input placeholder={i18n.t('username')} autoCapitalize="none" onChangeText={username => this.setState({username})}/>
</Item>
<Item regular style={styles.loginInput}>
<Icon type="AntDesign" name="lock"/>
<Input placeholder={i18n.t('password')} secureTextEntry={true} onChangeText={password => this.setState({password})}/>
</Item>
<Button block style={styles.loginButton} onPress={this.login.bind(this)} activeOpacity={1}>
{
this.state.loginProgress
? <ActivityIndicator color="white"/>
: <Text style={Theme.lightBold}>{i18n.t('login')}</Text>
}
</Button>
</Form>
);
}
render() {
return (
<KeyboardAvoidingView behavior="padding" style={styles.container}>
{this.renderLogo()}
{this.renderForm()}
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
...Theme.p1,
...Theme.centered
},
loginForm: {
width: '100%'
},
loginInput: {
...Theme.bgSecondary,
...Theme.mb1,
...Theme.r1
},
loginButton: {
...Theme.bgPrimary,
...Theme.r1,
...Theme.primaryButton
}
});
const mapStateToProps = state => ({
authentication: state.authentication,
});
const mapDispatchToProps = dispatch => ({
onLogin: (user) => {
dispatch(loginSuccess(user));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);
咩有登陆进去,还是存在一些问题
作者:jser_dimple
-------------------------------------------
个性签名:一个人在年轻的时候浪费自己的才华与天赋是一件非常可惜的事情
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!
微信
支付宝