Skip to content

Commit

Permalink
推送开关移到设置
Browse files Browse the repository at this point in the history
  • Loading branch information
@kilotron
kilotron committed Jun 3, 2019
1 parent 473541c commit a3d71cb
Show file tree
Hide file tree
Showing 6 changed files with 211 additions and 195 deletions.
107 changes: 107 additions & 0 deletions CnBlogAndroid/Source/component/SettingItemSwitch.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
View,
Text,
Image,
Switch,
StyleSheet,
} from 'react-native';
import MyAdapter from '../screens/MyAdapter.js';

const screenWidth= MyAdapter.screenWidth;
const screenHeight= MyAdapter.screenHeight;

SettingItemSwitchProps = {
text: PropTypes.string.isRequired, // 显示的文字
imageSource: PropTypes.string.isRequired, // 文字左边的图标路径
imageBackgroundColor: PropTypes.string.isRequired, // 图标的背景颜色
imageTintColor: PropTypes.string.isRequired, // 图标前景颜色
onValueChange: PropTypes.func.isRequired, // 开关状态改变时调用的函数，有1个参数value, 其值为true/false
initialValue: PropTypes.func.isRequired, // 一个异步函数，返回开关初始值
}

/**SettingItemSwitch可用于设置页面，显示一个带有图标、开关的设置项。
* 此组件自带分隔线、上下左右边距，使用此组件不需要设置分隔线与上下左右边距。
*/
export default class SettingItemSwitch extends Component {
constructor(props) {
super(props);
this.state = {
isOn: false,
};
}

componentWillMount() {
this.props.initialValue()
.then((isOn) => {
this.setState({isOn: isOn});
})
}

render() {
return (
<View style={[styles.outermostView, {backgroundColor: global.theme.backgroundColor}]}>
{/* 文字旁边的图标 */}
<View style={[styles.imageWrapperView, {backgroundColor: this.props.imageBackgroundColor}]}>
<Image
source={this.props.imageSource}
style={{height: 15, width: 15}}
resizeMode='contain'
tintColor={this.props.imageTintColor}
/>
</View>

<View style={{
flexGrow: 1,
paddingLeft: 0.06*screenWidth,
}}>
{/* 文字'黑暗模式'和右边的开关 */}
<View style={styles.textAndSwitchView}>
<Text style={{fontSize: 18, color: global.theme.textColor}}>{this.props.text}</Text>
<Switch
style={{alignItems: 'flex-end'}}
onTintColor='#4BD862' //开关打开时的背景颜色
thumbTintColor='#ececec' //开关上按钮的颜色
tintColor='#abb0b4' //关闭时背景颜色
value={this.state.isOn}
onValueChange={(value) => {
this.setState({isOn: value});
this.props.onValueChange(value);
}}
/>
</View>
{/* 分隔线 */}
<View style={{height: 1, backgroundColor: global.theme.settingsSeperatorColor, }}/>
</View>
</View>
)
}
}

SettingItemSwitch.PropTypes = SettingItemSwitchProps;

const styles = StyleSheet.create({
outermostView: {
alignItems: 'center',
flexDirection: 'row',
height: 0.07*screenHeight,
marginTop: 0.01*screenHeight,
backgroundColor: global.theme.backgroundColor,
paddingLeft: 0.05*screenWidth,
paddingRight: 0.05*screenWidth,
},
imageWrapperView: {
borderRadius: 4,
height: 26,
width: 26,
alignItems: 'center',
justifyContent: 'center',
},
textAndSwitchView: {
flexGrow: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}
})
Binary file added CnBlogAndroid/Source/images/paper_plane.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added CnBlogAndroid/Source/images/push.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
119 changes: 46 additions & 73 deletions CnBlogAndroid/Source/screens/Settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import { StorageKey } from '../config';
import MyAdapter from './MyAdapter.js';
import * as storage from '../Storage/storage';
import * as umengPush from '../umeng/umengPush';
import * as Push from '../DataHandler/Push/PushHandler';
import * as Push from '../DataHandler/Push/PushHandler';
import SettingItemSwitch from '../component/SettingItemSwitch';

const screenWidth= MyAdapter.screenWidth;
const screenHeight= MyAdapter.screenHeight;
Expand Down Expand Up @@ -46,96 +47,68 @@ export default class Settings extends Component {

constructor(props) {
super(props);
this.toggleTheme = () => {
this.toggleTheme = (isDarkMode) => {
this.setState(state => ({
theme:
state.theme === themes.dark
? themes.light
: themes.dark,
theme: isDarkMode ? themes.dark : themes.light,
}), ()=>{this.props.navigation.setParams({theme: this.state.theme});});
global.theme = global.theme === themes.dark
? themes.light
: themes.dark;
global.theme = isDarkMode ? themes.dark : themes.light;
};
this.state = {
theme: global.theme,
toggleTheme: this.toggleTheme,
isDarkMode: false,
}
this.props.navigation.setParams({theme: this.state.theme});
}

componentWillMount() {
storage.getItem(StorageKey.IS_DARK_MODE)
.then((isDarkMode) => {
this.setState({isDarkMode: isDarkMode});
})
.catch((error) => {
storage.setItem(StorageKey.IS_DARK_MODE, this.state.isDarkMode);
})
}

getChildContext() {
return {theme: this.state.theme, toggleTheme: this.toggleTheme};
}

render() {
return (
<View style={{backgroundColor: this.state.theme.backgroundColor, flex: 1}}>
<View
style={{
alignItems: 'center',
flexDirection: 'row',
height: 0.08*screenHeight,
marginBottom: 0.01*screenHeight,
backgroundColor: this.state.theme.backgroundColor,
paddingLeft: 0.05*screenWidth,
paddingRight: 0.05*screenWidth,
<SettingItemSwitch
text='黑暗模式'
imageSource={require('../images/moon.png')}
imageBackgroundColor={global.theme.darkModeIconBackgroundColor}
imageTintColor={global.theme.darkModeIconTintColor}
onValueChange={(value) => {
this.toggleTheme(value);
storage.setItem(StorageKey.IS_DARK_MODE, value)
}}
>
{/* 文字旁边的图标 */}
<View style={{
borderRadius: 4,
backgroundColor: global.theme.darkModeIconBackgroundColor,
height: 26,
width: 26,
alignItems: 'center',
justifyContent: 'center',
}}>
<Image
source={require('../images/moon.png')}
style={{height: 15, width: 15}}
resizeMode='contain'
tintColor={global.theme.darkModeIconTintColor}
/>
</View>

<View style={{
flexGrow: 1,
paddingLeft: 0.06*screenWidth,
}}>
{/* 文字'黑暗模式'和右边的开关 */}
<View style={{
flexGrow: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Text style={{fontSize: 18, color: global.theme.textColor}}>黑暗模式</Text>
<Switch
style={{alignItems: 'flex-end'}}
value={this.state.isDarkMode}
onValueChange={(value) => {
this.toggleTheme();
this.setState({isDarkMode: value});
storage.setItem(StorageKey.IS_DARK_MODE, value)
}}
/>
</View>
{/* 分隔线 */}
<View style={{height: 1, backgroundColor: global.theme.settingsSeperatorColor, }}></View>
</View>
</View>
initialValue={async () => {
let isDarkMode = await storage.getItem(StorageKey.IS_DARK_MODE);
if (isDarkMode == null) {
isDarkMode = false;
storage.setItem(StorageKey.IS_DARK_MODE, isDarkMode);
}
return isDarkMode;
}}
/>
<SettingItemSwitch
text='接收推送'
imageSource={require('../images/paper_plane.png')}
imageBackgroundColor={global.theme.recvPushIconBackgroundColor}
imageTintColor={global.theme.recvPushIconTintColor}
onValueChange={(value) => {
storage.setItem(StorageKey.RECEIVE_PUSH, value);
if(value == false){
umengPush.closePush();
}
else{
umengPush.openPush();
Push.initPush();
}
}}
initialValue={async () => {
let recvPush = await storage.getItem(StorageKey.RECEIVE_PUSH);
if (recvPush == null) {
recvPush = false;
storage.setItem(StorageKey.RECEIVE_PUSH, recvPush);
}
return recvPush;
}}
/>
</View>
)
}
Expand Down
Loading

0 comments on commit a3d71cb

Please sign in to comment.