javascript 重新编写RN登录表单

Posted 2021-05-04

import React from 'react';
import PropTypes from 'prop-types';
import { 
	compose,
	withHandlers, 
	withState,
	setStatic,
	setPropTypes
} from 'recompose';
import { View } from 'react-native';
import { Button, FormInput, FormLabel } from 'react-native-elements';
import styles  from './Styles/LoginStyle';
import color from '../Themes/Colors';

const enhance = compose(
	setStatic('navigationOptions', { header: null }),
	setPropTypes({ onPress: PropTypes.func }),
	withState('username', 'userValue', ''),
	withState('password', 'passValue', ''),
	withHandlers({
		onUserChange: props => user => props.userValue(user),
		onPwdChange: props => pwd => props.passValue(pwd),
		onLogin: props => () => {
			props.navigation.navigate('main')
		}
	})
);

const Login = enhance(({
	username,
	password,
	onLogin, 
	onUserChange,
	onPwdChange,
}) => (
	<View style={styles.container}>
		<FormLabel>Username</FormLabel>
		<FormInput
			style={styles.textInput}
			placeholder="Username"
			value={username}
			onChangeText={onUserChange}
		/>
		<FormLabel>Password</FormLabel>
		<FormInput
			style={styles.textInput}
			placeholder="Password"
			secureTextEntry
			value={password}
			autoCapitalize={'none'}
			onChangeText={onPwdChange}
		/>
		<Button
			raised
			buttonStyle={styles.signBtn}
			title="SIGN IN"
			color={color.white}
			onPress={onLogin}
		/>
	</View>
))

export default Login;