Запрос простого способа выровнять текст в React Native

Question

Здравствуйте, я новичок, чтобы реагировать на родной язык, и я пытаюсь выровнять текст в собственном реагировании, используя свойство text align vertical top, но я не могу понять, что я делаю неправильно

Привет, здесь и добро пожаловать текст должен быть немного выровнен по верху

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
} from "react-native";

export default class SignUp extends React.Component {
  render() {
    return (
      <View style={styles.signup}>
        <Text style={styles.Text} />
        <Text style={styles.string}>Hi There!</Text>
        <Text style={styles.string}>Welcome</Text>
        <Text style={styles.Text}>FULL NAME</Text>
        <TextInput
          style={styles.textinput}
          placeholder="Please Enter Your Name"
          underlineColorAndroid={"transparent"}
        />
        <Text style={styles.Text}>EMAIL</Text>
        <TextInput
          style={styles.textinput}
          placeholder="Please Enter Your Email"
          underlineColorAndroid={"transparent"}
          keyboardType="email-address"
        />
        <Text style={styles.Text}>PASSWORD</Text>
        <TextInput
          style={styles.textinput}
          placeholder="Please Enter Your Password"
          secureTextEntry={true}
          underlineColorAndroid={"transparent"}
        />
        <Text style={styles.Text}>MOBILE NUMER</Text>
        <TextInput
          style={styles.textinput}
          placeholder="Please Enter Your Mobile Number"
          underlineColorAndroid={"transparent"}
          keyboardType="numeric"
        />
        <Text style={styles.Text}>CNIC</Text>
        <TextInput
          style={styles.textinput}
          placeholder="Please Enter Your CNIC"
          underlineColorAndroid={"transparent"}
          keyboardType="numeric"
        />
        <TouchableOpacity style={styles.button}>
          <Text style={styles.btntext}>Sign Up</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  signup: {
    alignSelf: "stretch",
  },
  header: {
    fontSize: 24,
    color: "#6069f2",
    paddingBottom: 10,
    marginBottom: 40,
    borderBottomColor: "#199187",
    borderBottomWidth: 1,
  },
  textinput: {
    alignSelf: "stretch",
    height: 40,
    marginBottom: 30,
    color: "#1D1105",
    borderBottomColor: "#f8f8f8",
    borderBottomWidth: 1,
  },
  button: {
    alignSelf: "stretch",
    alignItems: "center",
    padding: 20,
    backgroundColor: "#6069f2",
    marginTop: 30,
  },
  btntext: {
    color: "#fff",
    fontWeight: "bold",
  },
  string: {
    textAlignVertical: "top",
  },
});

введите описание изображения здесь

Это страница входа / подписки для проекта, над которым я работаю

Answer 1

Взгляните на следующую ссылку ... Вы спрашиваете вот так https://snack.expo.io/@talha_jafar / restless-donut

Answer 2

Поскольку React Native по умолчанию работает с моделью гибкого бокса, вы можете попробовать сделать это с помощью одного из следующих:

justifyContent: 'flex-start';

alignItems: 'flex-start';

А также установив высоту контейнера.