React Native App 中文本的居中對齊

Question

我的可視化的一些問題：

1. 我的第一個按鈕上的文本出現在按鈕的右端，即使我已將其與中心對齊。 如何將文本“登錄”移至中心？

2. 目前，“在此處注冊”文本顯示在屏幕中間。 我想要它到最后。 但是，當我增加 marginTop 的值時，文本消失了。 例如，如果我將其更改為 20，我只能看到它的一半（在屏幕中間）。 如果我進一步增加它，它就會消失。

3. 即使我已將其對齊，“忘記密碼”文本也會出現在左側。

4. 標題“我的應用程序”根本沒有出現。

我該如何解決這些小問題？

<Container View style={styles.container}>
      <Text View style={styles.title}>
        Instaride</Text>
        <View style={{flex:1}}></View>
      <Form View style={styles.formInput}> 
            <Item floatingLabel>
              <Label View style={styles.labelText}>Username</Label>
              <Input 
              View style={styles.textInput}
              onChangeText={(textUname) => uname(textUname)}
              value={textUname}

          placeholder={'Username'}
          />
            </Item>
            <Item floatingLabel >
              <Label View style={styles.labelText}>Password</Label>
              <Input 
              View style={styles.textInput}
              onChangeText={(textPassword) => password(textPassword)}
              value={textPassword}
          placeholder={'Password'}
          secureTextEntry={true}
          />
            </Item>
          </Form>

            <Button View style={styles.button}
            onPress={() => navigation.navigate("Details")}>
              <Text>Login</Text>
            </Button>
            <Text View style={styles.forgotText}>
              Forgot Password?</Text>

          <Right>
            <Button hasText transparent onPress={() => navigation.navigate('Registration')}>
              <Text View style={styles.signupText}>
                Don't have an account? Sign Up Here</Text>
            </Button>
          </Right>
      </Container>
    );
  }
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#242625',
    paddingTop: getStatusBarHeight(),
  },
  title: {
    textAlign: 'center',
    fontSize: 22,
    color: 'white',
  },
  textInput: {
    color: 'white',
  },
  button: {
    marginTop: 15,
    backgroundColor: '#65c756',
    width: '70%',
    height: '6%',
    justifyContent: 'center',
    alignSelf: 'center'
  },
  forgotText: {
    marginTop: 15,
    justifyContent: 'center',
    textAlign: 'center',
    color: 'white',
  },
   signupText: {
    marginTop: 16,
    justifyContent: 'center',
    color: 'white',
  },
  labelText: {
    fontSize : 14,
  },
  formInput: {    
    borderBottomWidth: 1, 
    marginLeft: 20,   
    marginRight: 20, 
    marginTop: 40,  
  },
});

Answer 1

更新：

您不需要使用Input View ，因為這不是正確的方法。

以下代碼有效，您可以在 Expo 演示中查看，您需要在Button添加full 。

---

對要點的回答：

1. 你不需要Left / Right ，你可以簡單地把它放在View ， Left導致了這個問題。
2. 在中間部分使用flex:1 ，所以它會增長並占據屏幕，並將您的Sign Up here推Sign Up here底部
3. 忘記密碼被推送到中心
4. 我們使用了getStatusBarHeight並且填充等於 statusBarHeight

---

import * as React from "react";
import {
  Text,
  View,
  StyleSheet,
  Container,
  Form,
  Item,
  Label,
  Input,
  Left,
  Right,
  Button,
  Content
} from "native-base";
import { SafeAreaView } from "react-native";
import Constants from "expo-constants";
import { getStatusBarHeight } from "react-native-status-bar-height";

// You can import from local files
import AssetExample from "./components/AssetExample";

// or any pure javascript modules available in npm
import { Card } from "react-native-paper";

export default class App extends React.Component {
  render() {
    return (
      <Container
        View
        style={Object.assign(
          { ...styles.container },
          { marginTop: getStatusBarHeight() }
        )}
      >
        <Content contentContainerStyle={{ flex: 1 }}>
          <View>
            <Text style={styles.title}>Instaride</Text>
          </View>

          <View style={{ flex: 1 }}>
            <Form style={Object.assign({ ...styles.formInput }, { flex: 1 })}>
              <Item floatingLabel>
                <Label style={styles.labelText}>Username</Label>
                <Input style={styles.textInput} placeholder={"Username"} />
              </Item>
              <Item floatingLabel>
                <Label style={styles.labelText}>Password</Label>
                <Input
                  View
                  style={styles.textInput}
                  placeholder={"Password"}
                  secureTextEntry={true}
                />
              </Item>
              <Button
                full
                style={styles.button}
                onPress={() => navigation.navigate("Details")}
              >
                <Text>Login</Text>
              </Button>
            </Form>
          </View>

          <View>
            <Text View style={styles.forgotText}>
              Forgot Password?
            </Text>

            <Button
              hasText
              transparent
              onPress={() => navigation.navigate("Registration")}
              style={{ justifyContent: "center" }}
            >
              <Text style={styles.signupText}>
                Don't have an account? Sign Up Here
              </Text>
            </Button>
          </View>
        </Content>
      </Container>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#242625",
    borderWidth: 2,
    borderColor: "red"
  },
  title: {
    textAlign: "center",
    fontSize: 22,
    color: "white"
  },
  textInput: {
    color: "white"
  },
  button: {
    marginTop: 15,
    backgroundColor: "#65c756"
  },
  forgotText: {
    marginTop: 15,
    justifyContent: "center",
    textAlign: "center",
    color: "white"
  },
  signupText: {
    textAlign: "center",
    justifyContent: "center",
    color: "white"
  },
  labelText: {
    fontSize: 14
  },
  formInput: {
    borderBottomWidth: 1,
    marginLeft: 20,
    marginRight: 20
  }
};

世博會臨時鏈接： https : //snack.expo.io/@dhavaljardosh/8af9d3