ReactNative（1.5）{登陆页面练习}

本文主要是介绍ReactNative（1.5）{登陆页面练习}，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

// rnc
import React, { Component } from "react";
import {
  Text,
  View,
  StatusBar,
  ImageBackground,
  Image,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
} from "react-native";
// 获取宽高
const { width, height } = Dimensions.get("window");
// rpx转物理像素  使用 例如: 35rpx rpx(35)
const rpx = (x) => (width / 750) * x;
export default class App extends Component {
  state = { rememberPwd: false };
  // 判断是否记住密码的状态 返回对应的图片地址
  img_remember() {
    return this.state.rememberPwd
      ? require("./assets/check.png")
      : require("./assets/uncheck.png");
  }
  render() {
    return (
      <ImageBackground
        source={require("./assets/bg1.jpg")}
        style={{ width, height }}
        blurRadius={6}
      >
        {/* 沉浸式状态栏 */}
        <StatusBar backgroundColor="transparent" translucent></StatusBar>
        {/* 撑一个高度为状态栏高度的容器 把状态栏的高度部分撑出来 防止状态栏被内容覆盖 */}
        <View style={{ height: StatusBar.currentHeight }}></View>
        {/* 把页面其它内容包裹到容器 */}
        <View style={ss.content}>
          {/* 用户名 */}
          <View style={ss.area_input}>
            <Image
              style={ss.area_input_icon}
              source={require("./assets/user.png")}
            ></Image>
            <TextInput
              style={ss.area_input_text}
              placeholder="用户名"
              placeholderTextColor="white"
            ></TextInput>
          </View>
          {/* 密码 */}
          <View style={[ss.area_input, { marginTop: rpx(30) }]}>
            <Image
              style={ss.area_input_icon}
              source={require("./assets/pwd.png")}
            ></Image>
            <TextInput
              secureTextEntry
              style={ss.area_input_text}
              placeholder="密码"
              placeholderTextColor="white"
            ></TextInput>
          </View>
          {/* 账户操作区域 */}
          <View
            style={{
              marginTop: rpx(30),
              flexDirection: "row",
              justifyContent: "space-between",
            }}
          >
            <View style={{ flexDirection: "row" }}>
              <TouchableOpacity
                style={{ padding: rpx(5) }}
                onPress={() =>
                  this.setState({ rememberPwd: !this.state.rememberPwd })
                }
              >
                <Image
                  source={this.img_remember()}
                  style={{ width: rpx(35), height: rpx(35) }}
                ></Image>
              </TouchableOpacity>
              <Text style={{ fontSize: rpx(35), color: "white" }}>
                记住密码
              </Text>
            </View>
            <TouchableOpacity activeOpacity={0.7}>
              <Text style={{ fontSize: rpx(35), color: "white" }}>
                忘记密码
              </Text>
            </TouchableOpacity>
          </View>
          {/* 登录按钮 */}
          <TouchableOpacity
            activeOpacity={0.7}
            style={{
              backgroundColor: "#55c596",
              paddingVertical: rpx(10),
              alignItems: "center",
              borderRadius: rpx(10),
              marginTop: rpx(50),
            }}
          >
            <Text
              style={{
                color: "white",
                fontSize: rpx(40),
                letterSpacing: rpx(15),
              }}
            >
              登录
            </Text>
          </TouchableOpacity>
          {/* 新用户注册 */}
          <TouchableOpacity
            style={{
              paddingVertical: rpx(10),
              alignItems: "center",
              borderRadius: rpx(10),
              marginTop: rpx(50),
            }}
            activeOpacity={0.7}
          >
            <Text style={{ color: "white", fontSize: rpx(35) }}>
              新用户注册
            </Text>
          </TouchableOpacity>
        </View>
        {/* 其它登录方式 */}
        <View
          style={{
            position: "absolute",
            bottom: rpx(150),
            alignSelf: "center",
          }}
        >
          {/* 文字 */}
          <View style={{ flexDirection: "row", alignItems: "center" }}>
            <View style={ss.line}></View>
            <View>
              <Text
                style={{
                  fontSize: rpx(28),
                  color: "white",
                  marginHorizontal: rpx(20),
                }}
              >
                其它方式登录
              </Text>
            </View>
            <View style={ss.line}></View>
          </View>
          {/* 图标 */}
          <View
            style={{
              marginTop: rpx(30),
              flexDirection: "row",
              justifyContent: "space-around",
              alignItems: "center",
            }}
          >
            <TouchableOpacity activeOpacity={0.7} style={ss.btn_third}>
              <Image
                source={require("./assets/qq.png")}
                style={ss.btn_third_icon}
              ></Image>
            </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.7} style={ss.btn_third}>
              <Image
                source={require("./assets/wx.png")}
                style={ss.btn_third_icon}
              ></Image>
            </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.7} style={ss.btn_third}>
              <Image
                source={require("./assets/phone.png")}
                style={ss.btn_third_icon}
              ></Image>
            </TouchableOpacity>
          </View>
        </View>
      </ImageBackground>
    );
  }
}

const ss = StyleSheet.create({
  content: {
    paddingTop: rpx(200),
    paddingHorizontal: rpx(50),
  },
  area_input: {
    backgroundColor: "rgba(0,0,0,0.4)",
    padding: rpx(10),
    borderRadius: rpx(10),
    flexDirection: "row",
    alignItems: "center",
  },
  area_input_icon: {
    width: rpx(50),
    height: rpx(50),
    marginHorizontal: rpx(20),
  },
  area_input_text: {
    fontSize: rpx(40),
    color: "white",
    flex: 1,
  },
  line: {
    backgroundColor: "#55c596",
    height: 5,
    width: rpx(200),
  },
  btn_third_icon: {
    width: rpx(80),
    height: rpx(80),
  },
  btn_third: {
    backgroundColor: "#55c596",
    borderRadius: rpx(60),
    padding: rpx(10),
  },
});

这篇关于ReactNative（1.5）{登陆页面练习}的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！