Блог

изображение проекта

Я хотел бы узнать у вас, есть ли какой-либо способ улучшить этот экран. Это может быть адаптивно как для мобильных устройств, так и для планшетов.Ниже приведено изображение так, как оно должно выглядеть. Должен ли я использовать абсолют для всех предметов?? Есть ли какой-нибудь способ сделать это более отзывчивым??

изображение проекта

 import React from 'react';
import {
  Image,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import {} from 'react-native-gesture-handler';
const Login = () => {
  return (
    <View style={{flex: 1}}>
      <View style={{flex: 1, backgroundColor: 'black'}} />
      <View
        style={{
          flex: 1,
          backgroundColor: 'white',
          position: 'absolute',
          top: '40%',
          bottom: 0,
          left: 0,
          right: 0,
          borderTopLeftRadius: 50,
          borderTopRightRadius: 50,
        }}>
        <View
          style={{
            position: 'relative',
            top: '10%',
            marginHorizontal: 30,
            marginVertical: 20,
          }}>
          <Text>Email</Text>
          <TextInput
            placeholder="Email"
            style={{borderColor: 'gray', borderBottomWidth: 2}}
          />
        </View>

        <View
          style={{
            position: 'relative',
            top: '10%',
            marginHorizontal: 30,
            marginVertical: 20,
          }}>
          <Text>Password</Text>
          <TextInput
            placeholder="Password"
            style={{borderColor: 'gray', borderBottomWidth: 2}}
          />
        </View>
        <View
          style={{
            position: 'relative',
            top: '10%',
            alignSelf: 'center',
            width: 150,
            height: 50,
            backgroundColor: 'Black',
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: 40,
          }}>
          <TouchableOpacity>
            <Text style={{color: 'white'}}>Login</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

export default Login;
 

Может ли кто-нибудь показать мне лучший способ сделать это более отзывчивым для мобильных устройств и планшетов? Для той части рисунка 2, где показан круг. Есть ли лучший способ сделать это? Или мне придется использовать Абсолютное положение для всего?? Заранее всем вам спасибо

Вы можете, используя justifyContent: 'flex-end' View родительский стиль, который выглядит так:

 <View
          style={{
            flex: 1,
            backgroundColor: 'black',
            justifyContent: 'flex-end',
          }}
        >
{...view input email password here...}<View/>