1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| import React from 'react';
import {
SafeAreaView,
StatusBar,
Text,
Button,
StyleSheet,
Platform
} from 'react-native';
import { createStackNavigator, createSwitchNavigator, TabNavigator } from 'react-navigation';
const isAndroid = Platform.OS === 'android';
class Screen1 extends React.Component {
componentDidMount() {
this._navListener = this.props.navigation.addListener('didFocus', () => {
StatusBar.setBarStyle('light-content');
isAndroid && StatusBar.setBackgroundColor('#6a51ae');
});
}
componentWillUnmount() {
this._navListener.remove();
}
render() {
return (
<SafeAreaView style={[styles.container, { backgroundColor: '#6a51ae' }]}>
<StatusBar
barStyle="light-content"
backgroundColor="#6a51ae"
/>
<Text style={[styles.paragraph, { color: '#fff' }]}>
Light Screen
</Text>
<Button
title="Next screen"
onPress={() => this.props.navigation.navigate('Screen2')}
color={"blue"}
/>
</SafeAreaView>
);
}
}
class Screen2 extends React.Component {
componentDidMount() {
this._navListener = this.props.navigation.addListener('didFocus', () => {
StatusBar.setBarStyle('dark-content');
isAndroid && StatusBar.setBackgroundColor('#ecf0f1');
});
}
componentWillUnmount() {
this._navListener.remove();
}
render() {
return (
<SafeAreaView style={[styles.container, { backgroundColor: '#ecf0f1' }]}>
<StatusBar
barStyle="dark-content"
backgroundColor="#ecf0f1"
/>
<Text style={styles.paragraph}>
Dark Screen
</Text>
<Button
title="Next screen"
onPress={() => this.props.navigation.navigate('Screen1')}
/>
</SafeAreaView>
);
}
}
export default TabNavigator({
Screen1: {
screen: Screen1,
navigationOptions: {
tabBarOnPress: ({ previousScene, scene, jumpToIndex }) => {
// TODO: This doesn't handle the initial render because the second screen renders last. What to do?
StatusBar.setBarStyle('light-content');
isAndroid && StatusBar.setBackgroundColor('#6a51ae');
jumpToIndex(scene.index);
},
},
},
Screen2: {
screen: Screen2,
navigationOptions: {
tabBarOnPress: ({ previousScene, scene, jumpToIndex }) => {
StatusBar.setBarStyle('dark-content');
isAndroid && StatusBar.setBackgroundColor('#ecf0f1');
jumpToIndex(scene.index);
},
},
},
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ecf0f1',
justifyContent: 'center',
alignItems: 'center',
},
paragraph: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
|
