143 lines
4.3 KiB
TypeScript
143 lines
4.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Image } from "react-native";
|
|
import { useTranslation } from 'react-i18next';
|
|
import MyStatusbar from "./component/MyStatusbar";
|
|
import MyHeader from "./component/MyHeader";
|
|
import LanguageModal from "./component/LanguageModal.tsx";
|
|
import { NativeStackScreenProps } from "@react-navigation/native-stack";
|
|
import { RootStackParamList } from "../App";
|
|
import pxToDp from "./helper/pxToDp";
|
|
import DeviceInfo from "react-native-device-info";
|
|
import { LANGUAGES } from "./i18n";
|
|
|
|
type Props = NativeStackScreenProps<RootStackParamList>;
|
|
|
|
export default function SettingScreen({ navigation }: Props) {
|
|
const { t, i18n } = useTranslation();
|
|
const [languageModalVisible, setLanguageModalVisible] = useState(false);
|
|
|
|
// 获取当前语言显示名称
|
|
const getCurrentLanguageLabel = (): string => {
|
|
const currentLang = i18n.language;
|
|
const language = LANGUAGES.find(lang => lang.key === currentLang);
|
|
return language?.label || '中文';
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<MyStatusbar backgroundColor="#f2f3f7" dark></MyStatusbar>
|
|
<MyHeader
|
|
title={t('settings.title')}
|
|
textColor="#333"
|
|
backgroundColor="#f2f3f7"
|
|
navigation={navigation}
|
|
></MyHeader>
|
|
|
|
<View style={{ flex: 1, alignItems: 'center', paddingTop: pxToDp(24) }}>
|
|
{/* 软件语言 */}
|
|
<TouchableOpacity
|
|
style={styles.settingItem}
|
|
onPress={() => setLanguageModalVisible(true)}
|
|
>
|
|
<View style={styles.settingItemLeft}>
|
|
<Image
|
|
style={styles.icon}
|
|
source={require("./img/_SoftwareLanguage.png")}
|
|
/>
|
|
<Text style={styles.settingLabel}>{t('settings.language')}</Text>
|
|
</View>
|
|
<View style={styles.settingItemRight}>
|
|
<Text style={styles.settingValue}>{getCurrentLanguageLabel()}</Text>
|
|
<Image
|
|
style={styles.arrow}
|
|
source={require("./img/Return2.png")}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
{/* 隐私协议 */}
|
|
<TouchableOpacity
|
|
style={[styles.settingItem, { marginTop: pxToDp(20) }]}
|
|
onPress={() => navigation.navigate("Privacy")}
|
|
>
|
|
<View style={styles.settingItemLeft}>
|
|
<Image
|
|
style={styles.icon}
|
|
source={require("./img/_PrivacyAgreement.png")}
|
|
/>
|
|
<Text style={styles.settingLabel}>{t('settings.privacy')}</Text>
|
|
</View>
|
|
<View style={styles.settingItemRight}>
|
|
<Image
|
|
style={styles.arrow}
|
|
source={require("./img/Return2.png")}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
{/* 版本号 */}
|
|
<View style={[styles.settingItem, { marginTop: pxToDp(20) }]}>
|
|
<View style={styles.settingItemLeft}>
|
|
<Image
|
|
style={styles.icon}
|
|
source={require("./img/_Versionnumber.png")}
|
|
/>
|
|
<Text style={styles.settingLabel}>{t('settings.version')}</Text>
|
|
</View>
|
|
<View style={styles.settingItemRight}>
|
|
<Text style={styles.settingValue}>{DeviceInfo.getVersion()}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 语言切换弹窗 */}
|
|
<LanguageModal
|
|
visible={languageModalVisible}
|
|
onClose={() => setLanguageModalVisible(false)}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#f2f3f7",
|
|
},
|
|
settingItem: {
|
|
width: pxToDp(670),
|
|
height: pxToDp(108),
|
|
borderRadius: pxToDp(24),
|
|
backgroundColor: '#fff',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: pxToDp(32),
|
|
},
|
|
settingItemLeft: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
settingItemRight: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
icon: {
|
|
width: pxToDp(40),
|
|
height: pxToDp(40),
|
|
marginRight: pxToDp(12),
|
|
},
|
|
settingLabel: {
|
|
fontSize: pxToDp(30),
|
|
color: '#333',
|
|
},
|
|
settingValue: {
|
|
fontSize: pxToDp(30),
|
|
color: "#999",
|
|
marginRight: pxToDp(14),
|
|
},
|
|
arrow: {
|
|
width: pxToDp(14),
|
|
height: pxToDp(24),
|
|
},
|
|
}); |