我正在尝试根据当前主题更改我的本机应用程序的背景颜色,即,无论是深色还是浅色。
这是我的代码:
const SignUp = ({navigation}) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [name, setName] = useState("");
const [secureTextEntry, setSecureTextEntry] = useState(true);
const [error, setError] = useState("")
const clear = () => {
setEmail('')
setPassword('')
setName('')
setError('')
}
function onLinkClick(){
navigation.navigate('login')
clear()
}
async function onButtonPress() {
if(email && password && name){
setError("");
await auth().createUserWithEmailAndPassword(email, password)
.then(() => {
const {currentUser} = auth();
firestore().
collection(`users/${currentUser.uid}/name`)
.add({
name: name
})
clear()
navigation.navigate('login')
})
.catch(() => {
setError("Email already exists!!! Login instead.")
})
}else{
setError("Please fill all the fields");
}
}
var colour = '#1d2447'
const toggleSecureEntry = () => {
if(password){
setSecureTextEntry(!secureTextEntry);
}
};
const renderIcon = (props) => (
<TouchableWithoutFeedback onPress={toggleSecureEntry}>
<Icon {...props} name={secureTextEntry ? 'eye-off' : 'eye'}/>
</TouchableWithoutFeedback>
);
return(
<React.Fragment>
<View style={[styles.containerStyle, {backgroundColor: `${colour}`}]}>
<Text style={styles.textStyle} category='h2'>What should we call</Text>
<Text style={[styles.textStyle, {marginBottom: 10}]} category='h2'>you?</Text>
<Text style={styles.subtextStyle}>You'll need a name to make your</Text>
<Text style={styles.subtextStyle}>own posts, customize your blog,</Text>
<Text style={styles.subtextStyle}>and message people</Text>
<View style={styles.formStyle}>
<Input
style={styles.textInputStyle}
size='large'
placeholder='Email'
value={email}
onChangeText={nextValue => setEmail(nextValue)}
/>
<Input
value={password}
placeholder='Password'
accessoryRight={renderIcon}
secureTextEntry={secureTextEntry}
onChangeText={nextValue => setPassword(nextValue)}
style={styles.textInputStyle}
size="large"
autoCorrect
/>
<Input
value={name}
placeholder='Name'
onChangeText={nextValue => setName(nextValue)}
style={styles.textInputStyle}
size="large"
/>
</View>
<Button style={styles.button} size='medium' status='basic' appearance="outline" onPress={onButtonPress}>Sign Up</Button>
<Text style={styles.errorTextStyle} category='h6'>{error}</Text>
<Text style={styles.linkStyle}>Already have an account?</Text>
<Text style={styles.linkStyle} onPress={() => onLinkClick()}>Login</Text>
</View>
</React.Fragment>
)
在这里,我想根据当前主题是深色还是浅色来更改背景,但我无法获取它。