Skip to content

Commit 75f1573

Browse files
ChenlingasMxChenlingasMx
authored
Merge pull request #583 from panbibi/dev
fix(Switch):解决switch初始值(默认值)不能正确显示状态和添加明暗主题适配
2 parents 6a3dbc3 + 865f2f8 commit 75f1573

File tree

2 files changed

+80
-121
lines changed

2 files changed

+80
-121
lines changed

‎example/examples/src/routes/Switch/index.tsx

Lines changed: 20 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,7 @@ interface SwitchViewState {
1010
checked: boolean;
1111
}
1212

13-
export default class SwitchView extends React.Component<
14-
SwitchViewProps,
15-
SwitchViewState
16-
> {
13+
export default class SwitchView extends React.Component<SwitchViewProps, SwitchViewState> {
1714
constructor(props: SwitchViewProps) {
1815
super(props);
1916
this.state = {
@@ -32,92 +29,45 @@ export default class SwitchView extends React.Component<
3229
<Layout>
3330
<Header title={title} description={description} />
3431
<Body>
35-
<Card
36-
title={`实例展示，value=${this.state.checked}`}
37-
bodyStyle={{paddingLeft: 0, paddingRight: 0}}>
32+
<Card title={`实例展示，value=${this.state.checked}`} bodyStyle={{paddingLeft: 0, paddingRight: 0}}>
3833
<WingBlank>
39-
<Flex direction="row">
40-
<Switch
41-
checked={this.state.checked}
42-
onValueChange={this.handleChange}
43-
/>
34+
<Flex direction="row" style={{marginLeft: 15}}>
35+
<Switch checked={this.state.checked} onValueChange={this.handleChange} />
4436
<Spacing type="horizontal" />
45-
<Switch
46-
checked={this.state.checked}
47-
onValueChange={this.handleChange}
48-
/>
37+
<Switch checked={this.state.checked} onValueChange={this.handleChange} />
4938
</Flex>
5039
</WingBlank>
5140
</Card>
52-
<Card
53-
title={'禁用无法切换，disabled={true}'}
54-
bodyStyle={{paddingLeft: 0, paddingRight: 0}}>
41+
<Card title={'禁用无法切换，disabled={true}'} bodyStyle={{paddingLeft: 0, paddingRight: 0}}>
5542
<WingBlank>
56-
<Flex direction="row">
57-
<Switch
58-
checked={this.state.checked}
59-
onValueChange={this.handleChange}
60-
disabled
61-
/>
43+
<Flex direction="row" style={{marginLeft: 15}}>
44+
<Switch checked={this.state.checked} onValueChange={this.handleChange} disabled />
6245
<Spacing type="horizontal" />
63-
<Switch
64-
checked={this.state.checked}
65-
onValueChange={this.handleChange}
66-
disabled
67-
/>
46+
<Switch checked={this.state.checked} onValueChange={this.handleChange} disabled />
6847
</Flex>
6948
</WingBlank>
7049
</Card>
71-
<Card
72-
title={'列表中展示，不受控组件'}
73-
bodyStyle={{paddingLeft: 0, paddingRight: 0}}
74-
/>
75-
<List
76-
flat={false}
77-
extra={<Switch style={{position: 'absolute', right: 0}} />}>
78-
<List.Item
79-
extra={
80-
<Switch
81-
color="red"
82-
checked
83-
style={{position: 'absolute', right: 0}}
84-
/>
85-
}>
86-
自动设置
87-
</List.Item>
88-
<List.Item
89-
extra={
90-
<Switch
91-
color="#2EA3F4"
92-
checked
93-
style={{position: 'absolute', right: 0}}
94-
/>
95-
}>
96-
24小时制
97-
</List.Item>
50+
<Card title={'列表中展示，不受控组件'} bodyStyle={{paddingLeft: 0, paddingRight: 0}} />
51+
<List flat={false} extra={<Switch style={{position: 'absolute', right: 0}} />}>
52+
<List.Item extra={<Switch color="red" checked style={{position: 'absolute', right: 0}} />}>自动设置</List.Item>
53+
<List.Item extra={<Switch color="#2EA3F4" checked style={{position: 'absolute', right: 0}} />}>24小时制</List.Item>
9854
<List.Item>12小时制</List.Item>
9955
</List>
10056
<Spacing />
101-
<Card
102-
title={'设置颜色，color|trackStyle|thumbColor'}
103-
bodyStyle={{paddingLeft: 0, paddingRight: 0}}>
57+
<Card title={'设置颜色，color|trackStyle|thumbColor'} bodyStyle={{paddingLeft: 0, paddingRight: 0}}>
10458
<WingBlank>
105-
<Flex direction="row">
59+
<Flex direction="row" style={{marginLeft: 15}}>
10660
<Switch thumbColor="#ffe9a6" />
10761
<Spacing type="horizontal" />
108-
<Switch
109-
trackStyle={{backgroundColor: 'red', borderColor: 'red'}}
110-
/>
62+
<Switch trackStyle={{backgroundColor: 'red', borderColor: 'red'}} />
11163
<Spacing type="horizontal" />
11264
<Switch checked={true} color="#393E48" />
11365
</Flex>
11466
</WingBlank>
11567
</Card>
116-
<Card
117-
title={"尺寸大小，size?: 'small' | 'default' | 'large';"}
118-
bodyStyle={{paddingLeft: 0, paddingRight: 0}}>
68+
<Card title={"尺寸大小，size?: 'small' | 'default' | 'large';"} bodyStyle={{paddingLeft: 0, paddingRight: 0}}>
11969
<WingBlank>
120-
<Flex direction="row">
70+
<Flex direction="row" style={{marginLeft: 15}}>
12171
<Switch size="small" />
12272
<Spacing type="horizontal" />
12373
<Switch />
@@ -126,11 +76,9 @@ export default class SwitchView extends React.Component<
12676
</Flex>
12777
</WingBlank>
12878
</Card>
129-
<Card
130-
title={'尺寸大小，通过设置高宽来定制尺寸'}
131-
bodyStyle={{paddingLeft: 0, paddingRight: 0}}>
79+
<Card title={'尺寸大小，通过设置高宽来定制尺寸'} bodyStyle={{paddingLeft: 0, paddingRight: 0}}>
13280
<WingBlank>
133-
<Flex direction="row">
81+
<Flex direction="row" style={{marginLeft: 15}}>
13482
<Switch style={{height: 23, width: 34}} />
13583
<Spacing type="horizontal" />
13684
<Switch style={{height: 28, width: 42}} />

‎packages/core/src/Switch/index.tsx

Lines changed: 60 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
ViewStyle,
99
LayoutChangeEvent,
1010
StyleSheet,
11+
useColorScheme,
1112
} from 'react-native';
1213
import { Theme } from '../theme';
1314
import { useTheme } from '@shopify/restyle';
@@ -38,6 +39,10 @@ export interface SwitchState {
3839

3940
function Switch(props: SwitchProps) {
4041
const theme = useTheme<Theme>();
42+
const colorScheme = useColorScheme();
43+
const styles = createStyles({
44+
color: colorScheme === 'dark' ? theme.colors.mask : '#E6E6E6',
45+
});
4146
const {
4247
style,
4348
size,
@@ -50,8 +55,8 @@ function Switch(props: SwitchProps) {
5055
thumbStyle,
5156
...otherProps
5257
} = props;
53-
const [height, setHeight] = useState(16);
54-
const [translateXValue, setTranslateXValue] = useState(2);
58+
const [height, setHeight] = useState(11);
59+
const [translateXValue, setTranslateXValue] = useState(14);
5560

5661
const animatedStart = (checked: boolean) => {
5762
const obj = {
@@ -204,52 +209,58 @@ Switch.defaultProps = {
204209

205210
export default Switch;
206211

207-
const styles = StyleSheet.create({
208-
warpper: {
209-
position: 'relative',
210-
borderRadius: 16,
211-
backgroundColor: '#E6E6E6',
212-
},
213-
disabled: {
214-
// backgroundColor: 'rgba(255, 255, 255, 0.6)',
215-
backgroundColor: '#0001',
216-
borderRadius: 16,
217-
zIndex: 22,
218-
},
219-
bg: {
220-
borderRadius: 16,
221-
borderWidth: 2,
222-
borderColor: '#E6E6E6',
223-
},
224-
position: {
225-
position: 'absolute',
226-
backgroundColor: 'transparent',
227-
top: 0,
228-
bottom: 0,
229-
left: 0,
230-
right: 0,
231-
},
232-
grip: {
233-
top: 2,
234-
borderRadius: 16,
235-
},
236-
shadowDisable: {
237-
shadowColor: '#000',
238-
background: '#0001',
239-
shadowOffset: {
240-
width: 5,
241-
height: 4,
212+
type CreStyle = {
213+
color: string;
214+
};
215+
216+
function createStyles({ color }: CreStyle) {
217+
return StyleSheet.create({
218+
warpper: {
219+
position: 'relative',
220+
borderRadius: 16,
221+
backgroundColor: color,
222+
},
223+
disabled: {
224+
// backgroundColor: 'rgba(255, 255, 255, 0.6)',
225+
backgroundColor: '#0001',
226+
borderRadius: 16,
227+
zIndex: 22,
228+
},
229+
bg: {
230+
borderRadius: 16,
231+
borderWidth: 2,
232+
borderColor: color,
242233
},
243-
shadowOpacity: 0.3,
244-
shadowRadius: 2,
245-
},
246-
shadow: {
247-
shadowColor: '#000',
248-
shadowOffset: {
249-
width: 4,
250-
height: 4,
234+
position: {
235+
position: 'absolute',
236+
backgroundColor: 'transparent',
237+
top: 0,
238+
bottom: 0,
239+
left: 0,
240+
right: 0,
251241
},
252-
shadowOpacity: 0.2,
253-
shadowRadius: 3,
254-
},
255-
});
242+
grip: {
243+
top: 2,
244+
borderRadius: 16,
245+
},
246+
shadowDisable: {
247+
shadowColor: '#000',
248+
background: '#0001',
249+
shadowOffset: {
250+
width: 5,
251+
height: 4,
252+
},
253+
shadowOpacity: 0.3,
254+
shadowRadius: 2,
255+
},
256+
shadow: {
257+
shadowColor: '#000',
258+
shadowOffset: {
259+
width: 4,
260+
height: 4,
261+
},
262+
shadowOpacity: 0.2,
263+
shadowRadius: 3,
264+
},
265+
});
266+
}

0 commit comments

Comments
 (0)