无法使 React Native 登录屏幕类似于图像布局

Question

我是 React Native 的新手，我一直在尝试布局我的登录屏幕，但很难做到正确。这是我要实现的粗略布局：

我有以下代码，顶部蓝色背景占据屏幕的 2/3，灰色占据剩余的 1/3。登录文本输入位于一个白色框中，其位置恰好是一半在蓝色背景中，一半在灰色背景中。

我有以下代码：

<View style={styles.container}>
        <Text>Logo</Text>
        <View style={styles.loginBox}>
          <Text>text input</Text>
        </View>
        <TouchableOpacity style={styles.button} activeOpacity={.85}>
          <Text style={styles.btnText}>LOGIN</Text>
        </TouchableOpacity>
      </View>


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#439c8f',
    flex: 0.66,
    flexDirection: 'column',
    justifyContent: 'flex-end'
  },
  loginBox: {
    backgroundColor: '#ffffff',
    flex: 0.60,
    flexDirection: 'column',
    marginLeft: 10,
    marginRight: 10,
    justifyContent: 'flex-end',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#6d5cae',
    padding: 10,
    margin: 40,
    borderRadius: 5,
  },
  btnText: {
    color: 'white',
    fontWeight: 'bold'
  }
});

Answer 1

这种方法有点不同，

将文本输入（电子邮件和密码）分成不同的部分，并在顶部视图的 flex-end 插入电子邮件，在底部视图中插入密码。

      <View style={styles.container}>
       <View style={styles.topView}>
         <View style={styles.loginBox}>
           <Text>EMAIL</Text>
           <TextInput
             style={styles.textInput}
             placeholder="test@test.com"
             placeholderTextColor="black"
           />
         </View>
       </View>

       <View style={styles.bottomView}>
         <View style={styles.loginBox}>
           <Text>PASSWORD</Text>
           <TextInput
             style={styles.textInput}
             placeholder="........."
             placeholderTextColor="black"
             secureTextEntry="true"
           />
         </View>
         <TouchableOpacity style={styles.button}>
           <Text style={styles.btnText}>LOGIN</Text>
         </TouchableOpacity>
       </View>
     </View>


 const styles = StyleSheet.create({
     container: {
       flex: 1
     },
     topView: {
       flex: 2/3,
       backgroundColor: "#80a0ed",
       justifyContent: "flex-end"
     },
     bottomView: {
       flex: 1/3,
       backgroundColor: "#d1deff"
     },
     button: {
       alignItems: "center",
       backgroundColor: "#ef89ff",
       padding: 10,
       marginTop: 15,
       marginLeft: 40,
       marginRight: 40,
       borderRadius: 5
     },
     btnText: {
       color: "white",
       fontWeight: "bold",
       fontSize: 16
     },
     textInput: {
       marginTop: 10,
       backgroundColor: "#c2c6d1",
       padding: 10
     },
     loginBox: {
       backgroundColor: "#ffffff",
       flexDirection: "column",
       paddingTop: 10,
       paddingBottom: 10,
       paddingLeft: 20,
       paddingRight: 20,
       marginLeft: 20,
       marginRight: 20
     }
   });

否则，您必须为样式（loginBox）提供位置值。

例如：-

   position: 'absolute',
   marginTop: "your value",
   marginLeft: "your value"

无法使 React Native 登录屏幕类似于图像布局

Unable to make React Native login screen similar to image layout

reactjs

user-interface

native