|
| 1 | +import React, { Component } from 'react'; |
| 2 | +import ReactNative from 'react-native'; |
| 3 | +import { connect } from 'react-redux'; |
| 4 | +import LinearGradient from 'react-native-linear-gradient'; |
| 5 | +import InputAccessoryView from 'InputAccessoryView'; |
| 6 | +import { NavigationActions } from 'react-navigation'; |
| 7 | +const { |
| 8 | + Alert, |
| 9 | + AlertIOS, |
| 10 | + Image, |
| 11 | + View, |
| 12 | + Text, |
| 13 | + StyleSheet, |
| 14 | + StatusBar, |
| 15 | + ActivityIndicator, |
| 16 | + ScrollView, |
| 17 | + LayoutAnimation, |
| 18 | + TextInput, |
| 19 | + Button, |
| 20 | + TouchableOpacity |
| 21 | +} = ReactNative; |
| 22 | +type Props = {}; |
| 23 | +type State = {}; |
| 24 | + |
| 25 | +class LoginScreen extends Component<Props, State> { |
| 26 | + state = { text: '' }; |
| 27 | + get gradient() { |
| 28 | + return ( |
| 29 | + <LinearGradient |
| 30 | + colors={['#04befe', '#4481eb']} |
| 31 | + startPoint={{ x: 1, y: 0 }} |
| 32 | + endPoint={{ x: 0, y: 1 }} |
| 33 | + style={{ ...StyleSheet.absoluteFillObject }} |
| 34 | + /> |
| 35 | + ); |
| 36 | + } |
| 37 | + onChangeText = text => { |
| 38 | + console.log(text); |
| 39 | + }; |
| 40 | + onLogin = () => { |
| 41 | + const resetAction = NavigationActions.reset({ |
| 42 | + index: 0, |
| 43 | + actions: [NavigationActions.navigate({ routeName: 'RootScreen' })] |
| 44 | + }); |
| 45 | + LayoutAnimation.linear(); |
| 46 | + this.props.navigation.dispatch(resetAction); |
| 47 | + }; |
| 48 | + render() { |
| 49 | + return ( |
| 50 | + <View style={styles.container}> |
| 51 | + {this.gradient} |
| 52 | + <View style={styles.loginInputBox}> |
| 53 | + <TextInput |
| 54 | + {...inputOption} |
| 55 | + value={this.state.text} |
| 56 | + placeholder={'请输入用户名'} |
| 57 | + inputAccessoryViewID={inputAccessoryViewID} |
| 58 | + onChangeText={this.onChangeText} |
| 59 | + /> |
| 60 | + <TextInput |
| 61 | + {...inputOption} |
| 62 | + value={this.state.text} |
| 63 | + placeholder={'请输入密码'} |
| 64 | + inputAccessoryViewID={inputAccessoryViewID} |
| 65 | + onChangeText={this.onChangeText} |
| 66 | + /> |
| 67 | + <TouchableOpacity |
| 68 | + onPress={this.onLogin} |
| 69 | + activeOpacity={0.6} |
| 70 | + style={[styles.loginButton]} |
| 71 | + underlayColor={''}> |
| 72 | + <Text style={styles.buttonTitle}>登录</Text> |
| 73 | + </TouchableOpacity> |
| 74 | + </View> |
| 75 | + |
| 76 | + <InputAccessoryView nativeID={inputAccessoryViewID} backgroundColor="#fffffff7"> |
| 77 | + <View style={styles.textInputContainer}> |
| 78 | + <Button onPress={() => alert(1)} title="Send" /> |
| 79 | + </View> |
| 80 | + </InputAccessoryView> |
| 81 | + </View> |
| 82 | + ); |
| 83 | + } |
| 84 | +} |
| 85 | +const inputAccessoryViewID = 'inputAccessoryView1'; |
| 86 | + |
| 87 | +const styles = StyleSheet.create({ |
| 88 | + container: { |
| 89 | + flex: 1 |
| 90 | + }, |
| 91 | + loginInputBox: { |
| 92 | + marginTop: 100, |
| 93 | + paddingHorizontal: 20 |
| 94 | + }, |
| 95 | + loginButton: { |
| 96 | + justifyContent: 'center', |
| 97 | + alignItems: 'center', |
| 98 | + width: '100%', |
| 99 | + height: 45, |
| 100 | + borderRadius: 25, |
| 101 | + backgroundColor: '#53B6F6', |
| 102 | + marginTop: 20 |
| 103 | + }, |
| 104 | + buttonTitle: { |
| 105 | + color: '#fff', |
| 106 | + fontSize: 17 |
| 107 | + }, |
| 108 | + textInputContainer: { |
| 109 | + flexDirection: 'row' |
| 110 | + }, |
| 111 | + useridStyle: { |
| 112 | + height: 50, |
| 113 | + paddingLeft: 10, |
| 114 | + borderBottomWidth: StyleSheet.hairlineWidth, |
| 115 | + borderColor: 'rgba(255,255,255,.5)', |
| 116 | + borderRadius: 6, |
| 117 | + color: '#f1f1f1', |
| 118 | + fontSize: 16.5 |
| 119 | + }, |
| 120 | + text: { |
| 121 | + padding: 10, |
| 122 | + color: 'white' |
| 123 | + }, |
| 124 | + textBubbleBackground: { |
| 125 | + backgroundColor: '#2f7bf6', |
| 126 | + borderRadius: 20, |
| 127 | + width: 110, |
| 128 | + margin: 20 |
| 129 | + } |
| 130 | +}); |
| 131 | +const inputOption = { |
| 132 | + style: styles.useridStyle, |
| 133 | + autoCapitalize: 'none', |
| 134 | + autoCorrect: false, |
| 135 | + underlineColorAndroid: 'transparent', |
| 136 | + keyboardAppearance: 'dark', |
| 137 | + placeholderTextColor: 'rgba(255,255,255,.7)' |
| 138 | +}; |
| 139 | +LoginScreen.navigationOptions = () => ({ header: null }); |
| 140 | +export default connect()(LoginScreen); |
0 commit comments