ipanel-rnapp-ajb-base 1.0.0

package/app/screens/LoginScreen/index.js

@@ -0,0 +1,920 @@
+import React, {useState, useEffect, useCallback, useRef} from 'react';
+import {
+  View,
+  ScrollView,
+  Text,
+  TextInput,
+  StyleSheet,
+  Alert,
+  Platform,
+  StatusBar,
+  TouchableOpacity,
+  NativeModules,
+  ImageBackground,
+  TouchableWithoutFeedback,
+  Dimensions,
+} from 'react-native';
+import {useSafeArea} from 'react-native-safe-area-context';
+import CryptoJS from 'crypto-js';
+import UUIDGenerator from 'react-native-uuid-generator';
+import {Icon, Image, CheckBox, Button} from '@rneui/themed';
+
+import SmsCodeInput from '../../components/common/SmsCodeInput';
+
+import storage from '../../storage';
+import {replace} from '../../utils/RootNavigation';
+import {
+  getUserLocation,
+  updateHomedToken,
+  initOperatorHomedTouristAccount,
+  appReport,
+} from '../../utils/common';
+import {obtainSmscode, smscodeLogin, accountLogin} from '../../api';
+import {hideLoading, showLoading, showToast} from '../../utils/notice';
+
+import {confirmWithContent} from '../../utils/registerDialog';
+import config from '../../utils/config';
+import ProtocolType from '../../components/common/LoginType/protocol';
+let protocolAgreeResolve = null;
+
+function LoginScreen({navigation, route}) {
+  const insets = useSafeArea();
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLogined, setIsLogined] = useState(false);
+  const timer = useRef(null);
+  const [isLogining, setIsLogining] = useState(false);
+
+  useEffect(() => {
+    // 获取登录状态
+    storage.get('accessToken').then(token => {
+      // const appUserAgreement = await storage.get('appUserAgreement');
+      // if (!appUserAgreement) {
+      //   setProtocolAgree(false);
+      // }
+
+      if (token) {
+        replace('Home', {
+          redirect: true,
+        });
+
+        // 上报APP启动事件
+        appReport('APP_STARTUP');
+      }
+      setTimeout(() => {
+        setIsLoading(false);
+        setIsLogined(!!token);
+      }, 0);
+    });
+  }, []);
+
+  // useEffect(() => {
+  //   if (isLogined) {
+  //     // console.log("检测到已登录，自动跳转首页");
+  //     // TODO update account_data
+  //     replace('Home', {
+  //       redirect: true,
+  //     });
+  //   }
+  // }, [isLogined]);
+
+  const [phone, setPhone] = useState('');
+  const [smsId, setSmsId] = useState('');
+  const [userInputSmsCode, setUserInputSmsCode] = useState('');
+  const [smsCodeRightBtnDisabled, setSmsCodeRightBtnDisabled] = useState(false);
+  const [smsCodeRightBtnText, setSmsCodeRightBtnText] = useState('获取验证码');
+  const [smsCodeResendTime, setSmsCodeResendTime] = useState(0);
+
+  useEffect(() => {
+    if (phone && smsCodeResendTime === 0) {
+      setSmsCodeRightBtnDisabled(false);
+      setSmsCodeRightBtnText('获取验证码');
+    } else {
+      setSmsCodeRightBtnDisabled(true);
+    }
+  }, [phone, smsCodeResendTime]);
+  useEffect(() => {
+    if (smsCodeResendTime > 0) {
+      setSmsCodeRightBtnText(`${smsCodeResendTime}s后重发`);
+      timer.current = setTimeout(() => {
+        setSmsCodeResendTime(smsCodeResendTime - 1);
+      }, 1000);
+    }
+
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, [smsCodeResendTime]);
+
+  // 0 手机号+短信验证码登录
+  // 1 账号密码登录
+  const [loginWay, setLoginWay] = useState(0);
+
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const [protocolAgree, setProtocolAgree] = useState(false);
+  const [protocolDialogVisible, setProtocolDialogVisible] = useState(false);
+
+  const [serviceAgree, setServiceAgree] = useState(false);
+  const [serviceDialogVisible, setServiceDialogVisible] = useState(false);
+  const [privacyAgree, setPrivacyAgree] = useState(false);
+  const [privacyDialogVisible, setPrivacyDialogVisible] = useState(false);
+
+  useEffect(() => {
+    if (!route.params?.skip) {
+      openProtocolDialog();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (serviceAgree && privacyAgree) {
+      setProtocolAgree(true);
+    } else {
+      setProtocolAgree(false);
+    }
+  }, [serviceAgree, privacyAgree]);
+
+  const loginDisabled = !(
+    (loginWay === 0 && phone && userInputSmsCode) ||
+    (loginWay === 1 && username && password)
+  );
+
+  let smsCodeTimer;
+
+  function validPhone(phone) {
+    if (!phone) {
+      Alert.alert('请输入手机号');
+      return false;
+    }
+    if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(phone)) {
+      Alert.alert('请输入正确的手机号');
+      return false;
+    }
+    return true;
+  }
+
+  const handleGetSmsId = async () => {
+    if (!validPhone(phone)) {
+      return;
+    }
+    // 60s后重发
+    setSmsCodeResendTime(60);
+
+    setSmsCodeRightBtnDisabled(true);
+
+    const res = await obtainSmscode({
+      phone_number: phone,
+      length: 4,
+      type: 1, // type=1 表示登录用途
+    }).catch(err => {
+      console.log(err);
+      setSmsCodeRightBtnText('获取验证码');
+      setSmsCodeRightBtnDisabled(false);
+    });
+
+    if (res && res.code === 0) {
+      setSmsId(res.result.sms_id);
+
+      smsCodeTimer = setTimeout(() => {
+        setSmsCodeRightBtnText('获取验证码');
+        setSmsCodeRightBtnDisabled(false);
+      }, 120000);
+    } else {
+      setSmsCodeRightBtnText('获取验证码');
+      setSmsCodeRightBtnDisabled(false);
+    }
+  };
+
+  const handleUserAgree = () => {
+    // setProtocolDialogVisible(false);
+    // handleLogin();
+    // storage.set('appUserAgreement', true);
+
+    // getUserLocation().then(geoRes => {
+    //   global.base.storage.set('location', geoRes);
+    // });
+    setProtocolAgree(true);
+    typeof protocolAgreeResolve === 'function' && protocolAgreeResolve();
+    protocolAgreeResolve = null;
+  };
+
+  const handleUserDisagree = async () => {
+    // await storage.set('appUserAgreement', false);
+    // NativeModules?.RNToNativeEmitter?.exitApp();
+    setProtocolDialogVisible(false);
+    setProtocolAgree(false);
+    setServiceAgree(false);
+    setPrivacyAgree(false);
+  };
+
+  const handleLoginPress = () => {
+    if (loginDisabled) {
+      return;
+    }
+    if (protocolAgree) {
+      handleLogin();
+    } else {
+      // setProtocolDialogVisible(true);
+      openProtocolDialog().then(() => {
+        handleLogin();
+      });
+    }
+  };
+
+  const openProtocolDialog = () => {
+    return new Promise(resolve => {
+      // setProtocolDialogVisible(true);
+      protocolAgreeResolve = resolve;
+    }).then(() => {
+      setProtocolDialogVisible(false);
+    });
+  };
+
+  const handleLogin = async () => {
+    let res;
+
+    const {deviceModal, appName} = NativeModules?.RNToNativeEmitter || {};
+
+    const appID = await global.base.getAppId();
+
+    console.log('appID', appID);
+
+    let finallyAppID = appID;
+    if (!appID) {
+      // 兼容本地开发测试
+      finallyAppID = await UUIDGenerator.getRandomUUID();
+    }
+
+    if (loginWay === 0) {
+      if (!validPhone(phone)) {
+        return;
+      }
+
+      if (!smsId) {
+        Alert.alert('请先获取验证码');
+        return;
+      }
+
+      if (!userInputSmsCode) {
+        Alert.alert('请输入短信验证码');
+        return;
+      }
+      showLoading('登录中...');
+      setIsLogining(true);
+      res = await smscodeLogin({
+        phone_number: phone,
+        sms_id: smsId,
+        sms_code: userInputSmsCode,
+        create_address: 1, // 注册时自动建默认家庭
+        extend: {
+          appid: finallyAppID,
+          model: deviceModal || '开发测试',
+          application: appName || '爱家宝',
+        },
+      });
+    } else {
+      if (!username) {
+        Alert.alert('请输入账号');
+        return;
+      }
+
+      if (!password) {
+        Alert.alert('请输入密码');
+        return;
+      }
+      console.log(global.loading, 'global.loading');
+      showLoading('登录中...');
+      setIsLogining(true);
+      res = await accountLogin({
+        account_name: username,
+        password: CryptoJS.MD5(password).toString(),
+        create_address: 1, // 注册时自动建默认家庭
+        extend: {
+          appid: finallyAppID,
+          model: deviceModal || '开发测试',
+          application: appName || '爱家宝',
+        },
+      });
+    }
+    if (res.code === 0) {
+      console.log(res.result, 'ipanelClound用户信息');
+      await storage.set('accessToken', res.result.access_token);
+      await storage.set('refreshToken', res.result.refresh_token);
+
+      if (res.result.address && res.result.address[0]) {
+        const defaultAddr = res.result.address[0];
+        await storage.set('activeAddr', defaultAddr);
+        await storage.set('addressList', res.result.address || []);
+        await updateHomedToken();
+      } else {
+        await storage.set('activeAddr', {});
+        await storage.set('addressList', []);
+      }
+
+      delete res.result.address;
+      await storage.set('accountData', res.result);
+
+      // 放开这段重新登录就会置空运营商（进入标准版）
+      // await storage.set(
+      //   `${res.result?.account?.account_id || ''}currentOperator`,
+      //   {},
+      // );
+
+      // 初始化默认运营商对应的homed游客账号
+      const envVersion =
+        NativeModules?.RNToNativeEmitter?.serverCluster || 'dev';
+      await initOperatorHomedTouristAccount({
+        touristUsername: finallyAppID,
+        domain: envVersion === 'dev' ? 'homed.me' : 'homed.tv',
+        touristGroupId: envVersion === 'dev' ? 115017 : 4664, // 4664: tv集群的手机APP游客用户组. 115017: 运营集群手机APP游客用户组
+      });
+      clearTimeout(smsCodeTimer);
+      // setIsLogined(true);
+      // 判断是否已经选了运营商
+      const currentOperator = await storage.get(
+        `${res.result?.account?.account_id || ''}currentOperator`,
+      );
+
+      // 上报APP启动事件
+      appReport('APP_STARTUP');
+
+      hideLoading();
+      setIsLogining(false);
+      const appName =
+        NativeModules?.RNToNativeEmitter?.appName || config.LOCALTEST_APP_NAME;
+      if (currentOperator || appName.includes('安电工')) {
+        replace('Home', {
+          redirect: false,
+        });
+      } else {
+        confirmWithContent({
+          title: '选择运营商',
+          component: '你是否要选择运营商',
+          confirmButtonText: '确定',
+          confirmCallback: () => {
+            replace('OperatorSelectScreen', {
+              purpose: 'init',
+            });
+          },
+          cancelButtonText: '先不选',
+          cancelCallback: () => {
+            replace('Home', {
+              redirect: false,
+            });
+          },
+        });
+      }
+    } else {
+      hideLoading();
+      setIsLogining(false);
+      global.toast.showToast(res.message + '(code: ' + res.code + ')');
+    }
+  };
+
+  const statusBarPlaceholderStyle = {
+    height: (Platform.OS === 'ios' ? insets.top : 0) + StatusBar.currentHeight,
+  };
+
+  const handleSwitchLoginWay = () => {
+    if (loginWay === 0) {
+      setLoginWay(1);
+    } else {
+      setLoginWay(0);
+    }
+  };
+
+  const handleViewUserAgreement = () => {
+    navigation.navigate('WebviewScreen', {
+      title: '用户协议',
+      url: 'https://ipanelcloud2.ipanel.cn:50443/iapp/ajbstatic/service_agreement/user_agreement.html',
+    });
+  };
+  const handleViewPrivacyClause = () => {
+    navigation.navigate('WebviewScreen', {
+      title: '隐私条款',
+      url: 'https://ipanelcloud2.ipanel.cn:50443/iapp/ajbstatic/service_agreement/privacy_policy.html',
+    });
+  };
+  const handleViewUserAgreementByType = type => {
+    if (type === 'service') {
+      setServiceDialogVisible(true);
+    } else if (type === 'privacy') {
+      setPrivacyDialogVisible(true);
+    }
+  };
+
+  const handleSetProtocolAgree = isAgree => {
+    setProtocolAgree(isAgree);
+    setServiceAgree(isAgree);
+    setPrivacyAgree(isAgree);
+  };
+
+  const handleOneDisagree = async type => {
+    setProtocolAgree(false);
+    if (type === 'service') {
+      setServiceAgree(false);
+      setServiceDialogVisible(false);
+    } else if (type === 'privacy') {
+      setPrivacyAgree(false);
+      setPrivacyDialogVisible(false);
+    }
+  };
+  const handleOneAgree = type => {
+    if (type === 'service') {
+      setServiceAgree(true);
+      setServiceDialogVisible(false);
+    } else if (type === 'privacy') {
+      setPrivacyAgree(true);
+      setPrivacyDialogVisible(false);
+    }
+
+    typeof protocolAgreeResolve === 'function' && protocolAgreeResolve();
+    protocolAgreeResolve = null;
+  };
+
+  loginDisabled;
+  const loginBtnBg = {
+    backgroundColor: loginDisabled
+      ? 'rgba(234, 96, 0, 0.3)'
+      : 'rgba(234, 96, 0, 1)',
+  };
+
+  return (
+    <ImageBackground
+      source={require('../../assets/img/login_bg.png')}
+      style={[
+        styles.container,
+        {paddingTop: Platform.OS === 'ios' ? insets.top : 0},
+      ]}>
+      {isLoading || isLogined ? (
+        <View style={styles.welcomeView}>{/* 白屏界面 */}</View>
+      ) : (
+        <View style={styles.loginView}>
+          <View style={statusBarPlaceholderStyle} />
+
+          <View style={styles.changeLoginWay}>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              onPress={handleSwitchLoginWay}>
+              <View style={styles.changeLoginWayInner}>
+                <Image
+                  source={require('../../assets/img/qiehuan.png')}
+                  style={styles.exchangeIcon}
+                />
+
+                <Text style={styles.changeLoginWayText}>
+                  {loginWay === 0 ? '密码登录' : '验证码登录'}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.content}>
+            <View style={styles.titleBox}>
+              <Text style={styles.title}>
+                {loginWay === 0 ? '验证码登录' : '密码登录'}
+              </Text>
+
+              <Text style={styles.subTitle}>
+                {loginWay === 0
+                  ? '未注册过的手机号验证通过后将自动注册'
+                  : '请使用账号和密码登录'}
+              </Text>
+            </View>
+
+            {loginWay === 0 && (
+              <>
+                <View style={styles.inputBox}>
+                  <TextInput
+                    style={styles.input}
+                    value={phone}
+                    placeholder="手机号"
+                    onChangeText={text => setPhone(text)}
+                  />
+                </View>
+                <View style={styles.inputBox}>
+                  <SmsCodeInput
+                    value={userInputSmsCode}
+                    placeholder="验证码"
+                    rightBtnDisabled={smsCodeRightBtnDisabled}
+                    rightBtnText={smsCodeRightBtnText}
+                    onChangeText={text => setUserInputSmsCode(text)}
+                    onRightBtnPress={handleGetSmsId}
+                  />
+                </View>
+              </>
+            )}
+
+            {loginWay === 1 && (
+              <>
+                <View style={styles.inputBox}>
+                  <TextInput
+                    style={styles.input}
+                    value={username}
+                    placeholder="账号"
+                    onChangeText={text => setUsername(text)}
+                  />
+                </View>
+                <View style={styles.inputBox}>
+                  <TextInput
+                    style={styles.input}
+                    value={password}
+                    secureTextEntry
+                    placeholder="密码"
+                    onChangeText={text => setPassword(text)}
+                  />
+                </View>
+              </>
+            )}
+
+            <View style={styles.protocol}>
+              <CheckBox
+                center
+                checked={protocolAgree}
+                containerStyle={{
+                  margin: 0,
+                  padding: 0,
+                  backgroundColor: 'transparent',
+                }}
+                onPress={() => handleSetProtocolAgree(!protocolAgree)}
+                checkedIcon={
+                  <Icon
+                    name="checkmark-circle-outline"
+                    type="ionicon"
+                    color={styles.protocolLinkAgree.color}
+                    size={20}
+                  />
+                }
+                uncheckedIcon={
+                  <Icon
+                    name="radio-button-off"
+                    type="ionicon"
+                    color={styles.protocolText.color}
+                    size={20}
+                  />
+                }
+              />
+              <TouchableWithoutFeedback
+                onPress={() => setProtocolAgree(!protocolAgree)}>
+                <Text style={styles.protocolText}>
+                  已阅读并同意
+                  <TouchableWithoutFeedback
+                    style={{paddingVertical: 100}}
+                    onPress={() => handleViewUserAgreementByType('service')}>
+                    <Text
+                      style={
+                        protocolAgree || serviceAgree
+                          ? styles.protocolLinkAgree
+                          : styles.protocolLink
+                      }>
+                      用户协议
+                    </Text>
+                  </TouchableWithoutFeedback>
+                  和
+                  <TouchableWithoutFeedback
+                    style={{paddingVertical: 100}}
+                    onPress={() => handleViewUserAgreementByType('privacy')}>
+                    <Text
+                      style={
+                        protocolAgree || privacyAgree
+                          ? styles.protocolLinkAgree
+                          : styles.protocolLink
+                      }>
+                      隐私条款
+                    </Text>
+                  </TouchableWithoutFeedback>
+                </Text>
+              </TouchableWithoutFeedback>
+            </View>
+
+            <TouchableOpacity
+              activeOpacity={0.7}
+              onPress={handleLoginPress}
+              disabled={loginDisabled}>
+              <View style={styles.loginBtnBox}>
+                <View style={[styles.loginBtn, loginBtnBg]}>
+                  <Text style={styles.loginBtnText}>
+                    {isLogining ? '正在登录中...' : '登录'}
+                  </Text>
+                </View>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+
+      {serviceDialogVisible && !isLoading && (
+        <ProtocolType
+          handleOneDisagree={handleOneDisagree}
+          handleOneAgree={handleOneAgree}
+          url="https://ipanelcloud2.ipanel.cn:50443/iapp/ajbstatic/service_agreement/user_agreement.html"
+          type="service"
+        />
+      )}
+      {privacyDialogVisible && !isLoading && (
+        <ProtocolType
+          handleOneDisagree={handleOneDisagree}
+          handleOneAgree={handleOneAgree}
+          url="https://ipanelcloud2.ipanel.cn:50443/iapp/ajbstatic/service_agreement/privacy_policy.html"
+          type="privacy"
+        />
+      )}
+
+      {protocolDialogVisible && !isLoading && (
+        <View style={styles.agreementMask}>
+          <View style={styles.agreementConfirmContent}>
+            <View style={styles.agreementConfirmHead}>
+              <TouchableOpacity
+                style={styles.headerLeft}
+                onPress={() => {
+                  console.log(111);
+                  setProtocolDialogVisible(false);
+                }}>
+                <Image
+                  source={require('../../assets/img/goBack.png')}
+                  style={styles.goBackImg}
+                  resizeMode="contain"
+                />
+              </TouchableOpacity>
+              <View style={styles.agreementConfirmTitleBox}>
+                <Text style={styles.agreementConfirmTitle}>欢迎使用爱家宝</Text>
+              </View>
+            </View>
+            <ScrollView>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  为了更好的保障您的合法权益，请您阅读并同意
+                  <TouchableWithoutFeedback onPress={handleViewUserAgreement}>
+                    <Text style={styles.agreementConfirmImportantText}>
+                      用户协议
+                    </Text>
+                  </TouchableWithoutFeedback>
+                  和
+                  <TouchableWithoutFeedback onPress={handleViewPrivacyClause}>
+                    <Text style={styles.agreementConfirmImportantText}>
+                      隐私条款
+                    </Text>
+                  </TouchableWithoutFeedback>
+                  。为向您提供更优质的服务，我们可能会向您申请下列相关权限：
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  1. 读写设备存储权限（Android
+                  版本）：用于用于用户反馈、客服等功能中读写设备上的照片及文件；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  2. 地理位置权限（Android、iOS
+                  版本）：用于家庭位置管理、判断地区提供天气服务、发现附近智能设备；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  3. 相机权限（Android、iOS
+                  版本）：用于扫码绑定电视账户、扫码进行设备添加等功能；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  4. 相册权限(Android、ios
+                  版本):用于用户反馈等功能中读写设备上的照片及视频；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  5. 麦克风权限(Android、ioS 版本):智能客服等功能；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  6. 读取电话联系人权限(Android):用于电视通讯功能；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  7. 开启蓝牙权限(Android、ios
+                  版本):用于连接设备时连接设备发出的蓝牙信号，以进行设备通信，对于通过蓝牙连接的智能设备，也需要蓝牙权限用于通信；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  8. 开启蓝牙权限(Android、ios
+                  版本):用于连接设备时连接设备发出的蓝牙信号，以进行设备通信，对于通过蓝牙连接的智能设备，也需要蓝牙权限用于通信；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  7. 开启蓝牙权限(Android、ios
+                  版本):用于连接设备时连接设备发出的蓝牙信号，以进行设备通信，对于通过蓝牙连接的智能设备，也需要蓝牙权限用于通信；
+                </Text>
+              </View>
+            </ScrollView>
+
+            <View style={styles.agreementButtons}>
+              <TouchableOpacity
+                style={styles.disagreeBtn}
+                activeOpacity={0.7}
+                onPress={handleUserDisagree}>
+                <Text style={styles.disagreeBtnText}>不同意</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.agreeBtn}
+                activeOpacity={0.7}
+                onPress={handleUserAgree}>
+                <Text style={styles.agreeBtnText}>同意</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      )}
+    </ImageBackground>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  welcomeView: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    padding: 30,
+  },
+  titleBox: {
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 36,
+    color: 'rgba(48, 48, 48, 1)',
+  },
+  subTitle: {
+    fontSize: 14,
+    marginTop: 10,
+    marginBottom: 40,
+  },
+  inputBox: {
+    borderBottomWidth: 1,
+    marginVertical: 10,
+    borderBottomColor: 'rgba(217, 217, 217, 1)',
+  },
+  input: {
+    height: 50,
+    color: '#333',
+  },
+  welcomText: {
+    fontSize: 30,
+  },
+  loginView: {
+    flex: 1,
+  },
+  changeLoginWay: {
+    height: 70,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    marginRight: 20,
+  },
+  changeLoginWayInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  changeLoginWayText: {
+    color: 'rgba(51, 51, 51, 1)',
+    fontSize: 16,
+  },
+  exchangeIcon: {
+    width: 16,
+    height: 16,
+    marginRight: 3,
+  },
+  protocol: {
+    marginVertical: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  protocolText: {
+    color: 'rgba(102, 102, 102, 1)',
+  },
+  protocolLink: {
+    color: 'rgba(234, 96, 0, 1)',
+  },
+  protocolLinkAgree: {
+    color: '#0EC12C',
+  },
+  agreementMask: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: 2,
+  },
+  agreementConfirmContent: {
+    position: 'absolute',
+    width: Dimensions.get('window').width - 60,
+    height: 400,
+    left: 30,
+    top: Dimensions.get('window').height / 2 - 200,
+    backgroundColor: '#fff',
+    paddingBottom: 0,
+    borderWidth: 1,
+    borderColor: '#a1a1a1',
+    borderRadius: 20,
+  },
+  agreementConfirmHead: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingLeft: 10,
+    marginBottom: 5,
+    height: 40,
+  },
+  headerLeft: {
+    position: 'absolute',
+    top: 15,
+    left: 10,
+    zIndex: 2,
+  },
+  goBackImg: {
+    width: 20,
+    height: 20,
+  },
+  agreementConfirmTitleBox: {
+    // flex: 1,
+    position: 'absolute',
+    top: 10,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  agreementConfirmTitle: {
+    fontSize: 20,
+    // lineHeight: 50,
+    color: '#000',
+    textAlign: 'center',
+    // paddingTop: 20,
+  },
+  agreementConfirmText: {
+    fontSize: 16,
+    lineHeight: 30,
+    paddingHorizontal: 20,
+    color: '#000',
+  },
+  agreementConfirmImportantText: {
+    color: 'rgba(234, 96, 0, 1)',
+  },
+  agreementButtons: {
+    height: 50,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    borderTopColor: '#c1c1c1',
+    borderTopWidth: 0.5,
+  },
+  disagreeBtn: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomLeftRadius: 20,
+  },
+  disagreeBtnText: {
+    color: '#ccc',
+  },
+  agreeBtn: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderLeftColor: '#c1c1c1',
+    borderLeftWidth: 0.5,
+    borderBottomRightRadius: 20,
+  },
+  agreeBtnText: {
+    color: '#333',
+    fontSize: 16,
+  },
+  loginBtnBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  loginBtn: {
+    flex: 1,
+    height: 48,
+    marginHorizontal: 10,
+    borderRadius: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  loginBtnText: {
+    color: '#fff',
+    fontSize: 18,
+  },
+});
+
+export default LoginScreen;