在React Native上为“ HackerJobs”实现黑暗模式

我感到很累，但决心完成这个正确的应用程序。 我还想了解其他事情。 与往常一样，可以在这里找到该应用的仓库。

今天的主要重点是完成大部分“黑暗模式”，这是我多年来一直希望在我的应用程序上要做的事情。 有很多要介绍的内容，所以让我们开始吧。

表明我们处于黑暗模式

以前，我必须在应用程序中创建某种“设置”功能。 今天，这是由Redux处理的，在InitialState的Settings部分中带有嵌套的true / false布尔值。

const initialState = { 
 selectedTab: "Jobs", 
 savedJobs: [], 
 settings: { 
 "Dark Mode": true, 
 "Shuffle Job Threads When Opening": true 
 } 
 } 

事实证明，这非常有用，因为我现在可以访问应用程序的大部分内容，我们需要使用一个简单的MapStateToProps调用来指示其视图状态。

 mapStateToProps = (state) => { 
 return { 
 savedJobs: state.get('savedJobs'), 
 darkMode: state.get('settings')['Dark Mode'] 
 } 
 } 

这只是我痛苦的开始。

背景资料

由于每个应用程序选项卡组件屏幕都是独立创建的，因此需要进行一些工作以统一样式。 我创建了DarkStyles JS文件，该文件导出了深色视图所需的各种样式。

 export const darkstyle = StyleSheet.create({ 
 listDark: { 
 backgroundColor: 'black' 
 }, 
 buttonDark: { 
 backgroundColor: "black", 
 borderColor: 'white' 
 }, 
 cellCopyDark: { 
 color: 'white' 
 } 
 }) 

事实证明，这比我想象的要容易。 这只是意味着编写许多三元声明，以将各种样式混合在一起。 这是简单文本视图中的一个示例，该示例告诉用户没有保存的作业。

 <View style={[styles.emptyTextContainer, 
 (this.props.darkMode ? darkstyle.listDark : null)]}> 
 <Text style={[styles.emptyText, 
 (this.props.darkMode ? darkstyle.cellCopyDark : null) 
 ]}> 
 You do not have any stories saved. 
  
  

注意，这必须同时在背景和文本上进行。

纽扣

具有讽刺意味的是，您不应该将Component用作要样式的任何东西。 如果您不想要简单的按钮组件，则可以使用TouchableHighlight和View / Text滚动自己的组件。 真烦人

不过，将其设置为黑暗模式很好。

标签栏IOS

这需要一些谷歌搜索。 尽管React Native文档建议您在对象内使用BarStyle函数，但我发现它实际上并没有做任何事情。 最后，我需要使用BarTintColor并使用三元语句。

 <TabBarIOS 
 barTintColor={this.props.darkMode ? 'black' : null} 
 translucent={true}> 

我认为调用半透明为true或false都不会对应用程序产生任何影响。 但是谁知道。

状态栏

唯一的挑战是它需要作为渲染中TabBarIOS封闭函数的一个同级对象，而当时我只是坐在那里。 将其作为同胞坐着导致React Native向我抛出一个大的旧错误。

我决定通过将家人包裹在下面将要解决的SafeArea视图中来解决此问题。

关于StatusBar，我要说的唯一奇怪的事情是“ Light-content”不涉及Light模式。 这仅表示该栏的内容是黑色背景上的白色文本（我的应用程序的“暗模式”）。 当您为“暗模式”编写应用程序时，将其设置为“暗内容”，然后变成黑白色，这有点令人困惑。 啊啊

对于iPhone X

我碰到了这篇文章，讨论了如何针对X修改应用程序。我还必须将Yarn将React Native升级到0.50.1。 一切都没有中断，所以我同意了。 大概不应该这样做。

 <SafeAreaView style={( 
 this.props.darkMode ? styles.safeareaBlack: styles.safearea 
 )}> 

老实说，在输入SafeArea之前，我比较喜欢外观。 但是无所谓。

下一步是什么

标题栏看起来仍然很奇怪，但我不确定如何解决。 我还在考虑。

总的来说，我认为应用程序的心脏已经准备就绪。 接下来的事情是完善它，并准备好提交。