更新设置界面菜单布局

publish/changeLog.md

@@ -1,3 +1,7 @@
 ### 新增
 
 - 隐藏黑色主题背景设置，默认关闭，可以去设置-主题设置更改
+
+### 优化
+
+- 更新设置界面菜单布局

src/screens/Home/Views/Setting/Vertical/NavList.tsx

@@ -51,7 +51,7 @@ export default ({ onChangeId }: {
   }, [])
 
   return (
-    <ScrollView style={{ ...styles.container, borderTopColor: theme['c-border-background'] }} contentContainerStyle={styles.contentContainer} keyboardShouldPersistTaps={'always'}>
+    <ScrollView horizontal style={{ ...styles.container, borderBottomColor: theme['c-border-background'] }} contentContainerStyle={styles.contentContainer} keyboardShouldPersistTaps={'always'}>
       {
         SETTING_SCREENS.map(id => <ListItem key={id} id={id} activeId={activeId} onPress={handleChangeId} />)
       }
@@ -62,15 +62,15 @@ export default ({ onChangeId }: {
 
 const styles = createStyle({
   container: {
-    height: 96,
+    height: 50,
     flexGrow: 0,
     flexShrink: 0,
-    borderTopWidth: BorderWidths.normal,
+    borderBottomWidth: BorderWidths.normal,
     opacity: 0.7,
   },
   contentContainer: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexWrap: 'nowrap',
     padding: 5,
     // backgroundColor: 'rgba(0, 0, 0, 0.1)',
   },
@@ -79,8 +79,10 @@ const styles = createStyle({
   // },
 
   listItem: {
-    width: '33.33%',
+    // width: '33.33%',
     height: 40,
+    paddingLeft: 15,
+    paddingRight: 15,
     // height: 'auto',
     // flexDirection: 'row',
     // alignItems: 'center',

src/screens/Home/Views/Setting/Vertical/index.tsx

@@ -20,10 +20,10 @@ const Content = () => {
 
   return (
     <View style={styles.container}>
+      <NavList onChangeId={handleChangeId} />
       <ScrollView contentContainerStyle={styles.main} keyboardShouldPersistTaps={'always'}>
         <Main ref={mainRef} />
       </ScrollView>
-      <NavList onChangeId={handleChangeId} />
     </View>
   )
 }