Well I thought I was getting the hang of styling. Tested on several different sized phones and it all looked great. Then... I tested on an iPad. Several of my screens ran way off the page. I am using flex: 1 for the container so I don't understand why. Do iPads not respect flex: 1 or something? Or did I just royally mangle the layout code? I thought using the screen dimensions and % to calculate most things would work for responsive design.
Example, sign in screen. Bottom 2 buttons "Login" and "Home" run almost completely off iPad screen. On phone devices seem to display fine.
import React, { useState } from "react"; import { Dimensions, Image, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native"; import { auth } from '../../src/config' import AppText from "../components/AppText"; import colors from "../config/colors"; import Constants from "expo-constants"; let width = Dimensions.get('window').width; function SignIn( { navigation } ){ const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [message, setMessage] = useState(''); function emailSignIn(email, password){ email = email.trim(); auth.signInWithEmailAndPassword(email, password) .then(function(result) { setMessage(''); }).catch(function(error) { setMessage('Invalid Email or Password. Sorry :('); }); } function updateEmail(email){ setMessage(''); setEmail(email); } function updatePassword(password){ setMessage(''); setPassword(password); } return ( <View style={styles.container}> <Image style={styles.image} source={require("../assets/logo.png")} /> <Image style={styles.rainbow} source={require("../assets/rainbow.png")} /> <View style={styles.bottom}> <View style={styles.inputView}> <TextInput style= placeholder="E m a i l..." placeholderTextColor="#003f5c" onChangeText={(email) => updateEmail(email)} autoCapitalize = 'none' /> </View> <View style={styles.inputView2}> <TextInput style= placeholder="P a s s w o r d..." placeholderTextColor="#003f5c" secureTextEntry={true} onChangeText={(password) => updatePassword(password)} autoCapitalize = 'none' /> </View> <TouchableOpacity onPress={()=> navigation.navigate('ForgotPassword')}> <Text style={styles.forgot_button}>Forgot Password?</Text> </TouchableOpacity> <AppText style={styles.message}>{message}</AppText> <TouchableOpacity onPress={()=>emailSignIn(email,password)} style={styles.appButtonContainer}> <Text style={styles.appButtonText}>LOGIN</Text> </TouchableOpacity> <TouchableOpacity onPress={()=>navigation.navigate('StartScreen')} style={styles.appButtonContainer}> <Text style={styles.appButtonText}>HOME</Text> </TouchableOpacity> </View> </View> ); } export default SignIn; const styles = StyleSheet.create({ appButtonContainer: { elevation: 8, backgroundColor: colors.purple, borderRadius: 30, borderWidth: 1, paddingVertical: "3%", width: width * 0.8, marginBottom: 10, }, appButtonText: { fontSize: width * 0.04, color: colors.white, fontWeight: "bold", alignSelf: "center", textTransform: "uppercase", letterSpacing: 10, }, bottom: { alignItems: "center", marginTop: width * 0.8, }, container: { flex: 1, backgroundColor: colors.white, justifyContent: "center", alignItems: "center", marginTop: Constants.statusBarHeight, }, forgot_button: { height: width * 0.1, fontWeight: "bold", }, image: { width: width* 0.5, resizeMode: "contain", position: "absolute", top: -20, }, inputView: { backgroundColor: "#d9f1ff", borderRadius: 30, borderWidth: 1, alignItems: "center", justifyContent: "center", marginBottom: width * 0.05, }, inputView2: { backgroundColor: "#ffffb8", borderRadius: 30, alignItems: "center", justifyContent: "center", borderWidth: 1, marginBottom: 0, }, message: { color: colors.red, marginTop: width * 0.05, marginBottom: 10, alignSelf: "center", }, rainbow: { position: "absolute", top: "10%", }, }); 
没有评论:
发表评论