0

我正在尝试根据当前主题更改我的本机应用程序的背景颜色，即，无论是深色还是浅色。

这是我的代码：

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>
)

在这里，我想根据当前主题是深色还是浅色来更改背景，但我无法获取它。

4

0 回答 0