React-Native 背景图片全屏显示及登录页面

在很多项目的登录页面上会显示全屏的一张图片加上登陆框的方式,在很多的情况下要进行很麻烦的适配,现在RN这套框架直接全部适配.
首先我们要创建一个新的JSX的文件为全局的文件(即一套代码适配两种机型)
在新建的文件输出你定义的类 module.exports = Loginview;

其次在index.ios.js里面引入var Loginview = require(‘./Loginview’);
var  Loginview = require('./Loginview');
最后开始项目编写,具体的我就不赘述了,直接贴代码吧,相信有一定基础的开发人员都会琢磨清楚的.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity
} from 'react-native';
//定义全局的变量,进行更好的适配
var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');
export default class Loginview extends Component {
   
    render() {
        return (
            <Image source={require(
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值