React-Native + Mobx项目实战--探花交友APP--登录页--输入框

一、状态栏

1、代码如下

import React from 'react';
import {View, Image, StyleSheet, StatusBar} from 'react-native';
import {styles} from '../../../constant/Styles';
import {Images} from '../../../constant/Images';
import {pxToDp} from '../../../utils/stylesKits';

const Index = () => {
  return (
    <View style={styles.Container}>
      <StatusBar backgroundColor={'transparent'} translucent={true} />
      <Image source={Images.loginBG} style={Styles.imgSize} />
    </View>
  );
};

const Styles = StyleSheet.create({
  imgSize: {
    width: '100%',
    height: pxToDp(200),
  },
});

export default Index;

其中src/utils/stylesKits.js代码如下，utils文件夹下存放常用工具，stylesKits.js用于将UI稿中的px转换为dp。

// 设计稿的宽度 / 元素的宽度 = 手机屏幕 / 手机中元素的宽度
// 手机中元素的宽度 = 手机屏幕 * 元素的宽度 / 设计稿的宽度

import {Dimensions} from 'react-native';

export const screenWidth = Dimensions.get('window').width;
export const screenHeight = Dimensions.get('window').height;
// 375为设计稿宽度--from UI
/*
 *@functionName: pxToDp
 *@params1: elePx
 *@description: 将像素转为dp
 *@author: 小小
 *@date: 2022-12-20 14:57:26
 */
export const pxToDp = elePx => (screenWidth * elePx) / 375;

UI稿中375是一倍图，UI常用的可能是二倍图750，自行替换即可。

2、知识点

      <StatusBar backgroundColor={'transparent'} translucent={true} />

backgroundColor={'transparent'}表示透明，translucent={true}表示沉浸式全屏。

3、运行效果

二、输入框

1、添加登录文字提示

import React from 'react';
import {View, Image, StyleSheet, StatusBar, Text} from 'react-native';
import {styles} from '../../../constant/Styles';
import {Images} from '../../../constant/Images';
import {pxToDp} from '../../../utils/stylesKits';

const Index = () => {
  return (
    <View style={styles.Container}>
      {/* 状态栏 */}
      <StatusBar backgroundColor={'transparent'} translucent={true} />
      {/* 背景图片 */}
      <Image source={Images.loginBG} style={Styles.imgSize} />
      {/* 登录信息 */}
      <View style={Styles.loginContainer}>
        <Text style={styles.Title}>手机号登录注册</Text>
      </View>
    </View>
  );
};

const Styles = StyleSheet.create({
  imgSize: {
    width: '100%',
    height: pxToDp(200),
  },
  loginContainer: {
    padding: pxToDp(20),
  },
});

export default Index;

手机运行效果如下

2、输入框

 这里引入一个UI框架库react-native-element，这里建议一定要学会看官方文档。根据官方文档，安装依赖

npm install -S @rneui/themed @rneui/base @rneui/base@edge @rneui/themed@edge react-native-vector-icons react-native-safe-area-context

 参照官方文档，添加input输入框，代码如下

import React