标签：1.5 10 rpx 35 height width fontSize ReactNative 页面

// 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),
  },
});

标签：1.5,10,rpx,35,height,width,fontSize,ReactNative,页面
来源： https://blog.csdn.net/weixin_59684494/article/details/122503334

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。