个人博文列表的夜间模式

swearitagain · Jun 3, 2019 · 59d9c79 · 59d9c79
1 parent a3d71cb
commit 59d9c79
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/CnBlogAndroid/App.js b/CnBlogAndroid/App.js
@@ -489,6 +489,19 @@ const TabBar = (props) => {
             },
             activeTintColor: global.theme.tabBarActiveTintColor,
             inactiveTintColor: global.theme.tabBarInactiveTintColor,
+            labelStyle: {
+                marginTop: 0,
+                fontSize: 10,
+            },
+            iconStyle: {
+                marginTop: 10,
+            },
+            tabStyle: {
+                height: height/13,
+            },
+            indicatorStyle: {
+                height: 0, // 去掉指示线
+            },
         },
     );
 

diff --git a/CnBlogAndroid/Source/screens/PersonalBlog.js b/CnBlogAndroid/Source/screens/PersonalBlog.js
@@ -167,6 +167,12 @@ export default class PersonalBlog extends Component{
         this._isMounted=false;
     }
 
+    _seperator = () => {
+        return (
+            <View style={[flatStyles.separatorStyle, {backgroundColor: global.theme.flatListSeperatorColor}]}/>
+        )
+    }
+
     _renderItem = (item)=>{
         let item1 = item;
         var Title = item1.item.Title;
@@ -177,25 +183,25 @@ export default class PersonalBlog extends Component{
         var CommentCount = item1.item.CommentCount;
         var Id = item1.item.key;
         return(
-            <View style={flatStyles.cell}>
+            <View style={[flatStyles.cell, {backgroundColor: global.theme.backgroundColor}]}>
                 <TouchableOpacity
-                    style = {styles.listcontainer}
+                    style = {[styles.listcontainer, {backgroundColor: global.theme.backgroundColor}]}
                     onPress = {Url!=='' ? ()=>this.props.navigation.navigate('BlogDetail',
                     {Id:Id, blogApp: global.user_information.BlogApp, CommentCount: CommentCount, Url: Url, Title: Title, Description: Description,}) : ()=>{}}
                 >
                     <Text
-                        style={blogListStyles.blogTitleText}
+                        style={[blogListStyles.blogTitleText, {color: global.theme.textColor}]}
                         accessibilityLabel = {Url}>
                         {Title}
                     </Text>
-                    <Text  numberOfLines={2} style = {blogListStyles.blogSummaryText}>
+                    <Text  numberOfLines={2} style = {[blogListStyles.blogSummaryText, {color: global.theme.textColor}]}>
                         {Description}
                     </Text>
                     <View style = {blogListStyles.blogAppAndTimeContainer}>
-                        <Text style = {{fontSize: 10, textAlign: 'left', color: 'black', flex: 1}}>
+                        <Text style = {{fontSize: 10, textAlign: 'left', color: global.theme.textColor, flex: 1}}>
                             {ViewCount+' 阅读'+'  '+CommentCount+' 评论'}
                         </Text>
-                        <Text style = {{fontSize: 10, textAlign: 'right', color: 'black', flex: 1}}>
+                        <Text style = {{fontSize: 10, textAlign: 'right', color: global.theme.textColor, flex: 1}}>
                             {'发布于: '+relativeTime(PostDate)}
                         </Text>
                     </View>
@@ -219,19 +225,20 @@ export default class PersonalBlog extends Component{
             })
         }
         return(
-            <View style = {styles.container}>
+            <View style = {[styles.container, {backgroundColor: global.backgroundColor}]}>
                 <View style = {[styles.header, {backgroundColor: global.theme.headerBackgroundColor}]}>
                     <Text style = {[styles.headertext, {color: global.theme.headerTintColor}]}>
                         {this.state.blogTitle}
                     </Text>
                 </View>
                 <View style={{ height: 0.75, backgroundColor: global.theme.seperatorColor}}/>
-                <View style = {styles.content}>
+                <View style = {[styles.content, {backgroundColor: global.theme.backgroundColor}]}>
                     <FlatList
                         renderItem={this._renderItem}
 						data= {data}
                         onRefresh = {this.UpdateData}
                         refreshing= {false}
+                        ItemSeparatorComponent={this._seperator}
                     />
                 </View>
             </View>
@@ -242,9 +249,6 @@ export default class PersonalBlog extends Component{
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        //justifyContent: 'center',
-        //alignItems: 'center',
-        backgroundColor: 'white',
     },
     header:{
         flexDirection: 'row',
@@ -274,7 +278,6 @@ const styles = StyleSheet.create({
         alignItems: 'flex-start',
         flex:1,
         alignSelf: 'stretch',
-        backgroundColor: 'white',
         paddingLeft: 0.03*screenWidth,
         paddingRight: 0.04*screenWidth,
     }

diff --git a/CnBlogAndroid/Source/styles/styles.js b/CnBlogAndroid/Source/styles/styles.js
@@ -22,20 +22,21 @@ export const flatStyles = StyleSheet.create({
     separatorStyle:{
         height:1,
         justifyContent:'center',
-        backgroundColor:'#dcdcdc'
+        marginLeft: 15,
+        marginRight: 0,
+        backgroundColor:'#dcdcdc',
     },
     /* 列表项的样式。公告、博文等列表可使用此样式。具体的使用方法：
        对每个列表项，例如_renderItem()函数中的最顶层View应用此样式。*/
     cell:{
         flex: 1,
-        backgroundColor: 'white',
         padding: 8,
         marginLeft: 5,
         marginRight: 5,
         marginVertical: 3,
         borderColor: '#dddddd',
         borderStyle: null,
-        borderWidth: 0.5,
+        //borderWidth: 0.5,
         borderRadius: 2,
     },
 })

diff --git a/CnBlogAndroid/Source/styles/theme-context.js b/CnBlogAndroid/Source/styles/theme-context.js
@@ -17,6 +17,7 @@ export const themes = {
         addTextColor: '#FFF',
 
         settingsSeperatorColor: '#DDD',
+        flatListSeperatorColor: '#DDD',
 
         // 设置页面的黑暗模式
         darkModeIconBackgroundColor: '#0079FF',
@@ -37,14 +38,15 @@ export const themes = {
         buttonColor: '#3A3A3A',
         buttonBorderColor: '#FFCC00',
         selectionColor: '#555555',
-        seperatorColor: '#DADADA',
+        seperatorColor: '#262626',        // 与背景颜色相同，相当于隐藏分隔线
         tabBarActiveTintColor: '#FFCC00',
         tabBarInactiveTintColor: '#DDD', // 需要调整
         addBackgroundColor: '#FFCC00',
         addUnderlayColor: '#0077FF',
         addTextColor: '#444',
 
         settingsSeperatorColor: '#666',
+        flatListSeperatorColor: '#666',
         darkModeIconBackgroundColor: '#CC9900',
         darkModeIconTintColor: '#DADADA',
         recvPushIconBackgroundColor: '#0B8A8C',