React Native-Android学习笔记

最新推荐文章于 2024-06-25 02:24:41 发布

樱木花肉

最新推荐文章于 2024-06-25 02:24:41 发布

阅读量328

点赞数

分类专栏： React Native 文章标签： react native android

本文链接：https://blog.csdn.net/qq_41770682/article/details/119252385

版权

React Native 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本人是RN小白一枚，这段时间在B站学习Android前端
学习视频连接
**

Visual Studio Code

**
真机模式（HUAWEI nova5Pro）：
1、手机连接电脑
2、将充电模式传输文件
3、打开开发者选项
4、打开USB调试
5、在设置中选择应用将新生成项目的app的悬浮窗打开

项目启动 :
npm start //项目启动
adb reverse tcp:8081 tcp:8081 //
npx react-native log-android //查看日志

Android Studio

**
项目启动 :
react-native run-android //android
react-native run-ios //ios

各部分组成
在这里插入图片描述

关闭所以黄色警告的代码

console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty string','Invalid props.style key'];
console.disableYellowBox = true // 关闭全部黄色警告

适配机型问题

import React, { Component } from 'react'
import {View, StyleSheet,Dimensions, Image, Text, FlatList} from 'react-native'

const {width,scale} = Dimensions.get('window')
const wuli = width * scale/1080   
... ...
const styles = StyleSheet.create({
    box:{
        width: wuli*340,
        height: wuli*200
    },
})

获取屏幕高及屏幕像素比

// width宽度逻辑像素
// height高度逻辑像素  对于不同像素的屏幕，屏幕逻辑像素不一样
// scale缩放比
const {width, height, scale} = Dimensions.get("window")
export default class App1 extends Component {
    render() {
        return (
            <View style={styles.box1}>
                <Text>屏幕宽度是：{width}，屏幕高度是：{height}</Text>
                <Text>屏幕缩放比是：{scale}</Text>
                {/*  对于不同像素的屏幕(即不同型号手机)，屏幕逻辑像素不一样，即宽度不一定都是360*/}
                {/* 缩放比对不同的手机也可能不一样，不是固定值 */}
            </View>
        )
    }
}

Flex布局

1、display属性
    display 设置此组件的显示类型。它的值只支持'flex'和'none'。'flex'是默认值。
2、flex属性
    在React Native 中，flex的值是一个正数，它的大小将与其弹性值成比例。
3、flexDirection属性
    flexDirection控制主轴的方向
    flexDirection的4个值：'row'，'row-reverse'，'column'，'column-reverse'
    'row' 设置主轴为水平正向 123
    'row-reverse' 设置主轴为水平反向 321
    'column' 设置主轴为垂直正向 123
    'column-reverse' 设置主轴为垂直反向 321
4、justifyContent属性
    justifyContent控制主轴的对齐方式
    justifyContent的5个值：'flex-start'，'flex-end'，'center'，'space-between'，'space-around'
    'flex-start': 左(或顶)对齐 默认值
    'flex-end' 右(或底)对齐
    'center' 居中对齐
    'space-between' 中间留白
    'space-around' 中间及两侧留白
5、alignItems属性
    alignItems属性控制侧轴对其方式
    alignItems属性的5个值： 'flex-start'，'flex-end'，'center'，'stretch'，'baseline'
    'flex-start': 左(或顶)对齐 默认值
    'flex-end' 右(或底)对齐
    'center' 居中对齐
    'stretch' 设置侧轴拉伸，此时侧轴方向(宽或者高)不要给固定数值，才能看得见拉伸效果
    'baseline' 设置基线对齐，文字底部对齐

按钮组件：

Button 组件的几个重要属性：   
title 按钮上的展示文字
color 按钮的背景颜色（安卓），或者文本颜色（IOS）
onPress  按压事件(即点击事件) 
因为Button样式本身有局限性。TouchableOpacity组件可以自由定义组件样式。

图片引入方式：

<Image source={require('./my-icon.png')} />                 //静态图片
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />        //混合App图片资源
<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />    //放置在Android的目录中的图片
//从网络引入图片
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />   // √
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />                                  // ×
//背景图片ImageBackground
return (
  <ImageBackground style={{height:100,width:300}} source={require('../images/vip_account.png')}>
    <Text>Inside</Text>
  </ImageBackground>
);

TextInput 属性

<TextInput style={styles.txtInput}
                    placeholder="请输入："             // 占位符设置(提示文本)
                    placeholderTextColor="#bbb"       //   占位符颜色设置
                    maxLength={8}                   //可以输入的最大长度
                    underlineColorAndroid="transparent"  //底线透明
                    // secureTextEntry = {true}    //安卓下的密码设置
 />

ScrollView

<ScrollView style={styles.box}
    horizontal={true}            //水平排列
    pagingEnabled={true}        //滚动条倍数滚动
    showsHorizontalScrollIndicator={false}     //不显示横向滚动条（用小圆点代替）
>
    {/* 多屏展示 */}
    <View><Text>第1屏</Text></View>
    <View><Text>第2屏</Text></View>
</ScrollView>

属性图片展示

在这里插入图片描述

import React, { Component } from 'react'
import { View, StyleSheet,Image, FlatList, Text } from 'react-native'
const img_data=[
    {
        name:"p01",
        des:"Puma Defy 赛琳娜限定"
    },
    {
        name:"p02",
        des:"圣罗兰 口红礼盒"
    },
    {
        name:"p03",
        des:"大豆家 方头奶奶鞋"
    },
    {
        name:"p04",
        des:"小狗图案不锈钢皂"
    },
    {
        name:"p05",
        des:"YSL限量眼影银盘"
    },
    {
        name:"p06",
        des:"可折叠加厚双面使用榻榻米床垫"
    }
]
export default class App2 extends Component {
    constructor(props){
        super(props)
        this.state = {
            img_data
        }
    }                           
    renderData({item}){           // item 就是数组数据中的每一项对象
        return(
            <View>
                <Image source={{uri:item.name}} style={styles.imgContent}/>
                <Text style={styles.txtContent}>{item.des}</Text>
            </View>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                <Image source={require("../../res/tit_50x16.png")} style={styles.imgTitle}/>    //有好货标签图片
                        //FlatList组件的使用
                <FlatList
                    numColumns={3}                           //每行显示个数
                    data={ this.state.img_data }             //数据源
                    renderItem = { this.renderData }          //渲染函数
                />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{     //大盒子
        flex:1,
        backgroundColor:"#ccc",
        paddingLeft:10,
        paddingRight:10,
    },
    imgTitle:{       //标签图片
        width:50,
        height:16,
        marginTop:10,
        marginBottom:10
    },
    imgContent:{      //图片内容
        width:100,
        height:100,
        marginRight:20
    },
    txtContent:{       //图片文字内容
        width:118,
        height:18,
        marginBottom:10
    }
})

登录界面展示

在这里插入图片描述

//4、登录界面
import React, { Component } from 'react'
import { View, StyleSheet, Dimensions, Image,TextInput, TouchableOpacity, Text } from 'react-native'
const {scale,height} = Dimensions.get('window')            //获取屏幕的属性
export default class App4 extends Component {
    render() {
        return (
            <View style={styles.container}>  
                <View style={styles.wrap}>
                    {/* 头像 */}
                    <Image source={require("../../res/avatar.jpg")} style={styles.avatar}/>
                    {/* 用户名 */}
                    <TextInput style={[styles.username,styles.txt]}
                        placeholder="请输入用户名"           // 占位符设置(提示文本)
                        placeholderTextColor="#ccc"           //   占位符颜色设置
                     />
                    {/* 密码 */}
                    <TextInput style={styles.txt}
                        placeholder="请输入密码"             // 占位符设置(提示文本)
                        placeholderTextColor="#ccc"           //   占位符颜色设置
                        maxLength={10}                          //可以输入的最大长度
                        underlineColorAndroid='transparent'   // 底线设置透明
                        secureTextEntry = {true}             //安卓下的密码设置
                     />
                    {/* 登录按钮 */}
                    <TouchableOpacity style={styles.loginBtn} activeOpacity={0.7}>
                        <Text style={styles.loginText}>
                            登录
                        </Text>
                    </TouchableOpacity>
                    {/* 忘记密码&&注册新用户 */}                   
                    <View style={styles.newUser}>             
                        <TouchableOpacity activeOpacity={0.8}>     //TouchableOpacity设为点击事件 
                            <Text style={{fontSize:12}}>           //activeOpacity为点击动作展示0-1，1无动作                  
                                忘记密码    
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.8}>
                            <Text style={{fontSize:12}}>
                                注册新用户
                            </Text>
                        </TouchableOpacity>
                    </View>
                    {/* 其他方式登录 */}
                    <View style={styles.others}>
                        <View style={styles.line}></View>
                        <View style={styles.othersTitle}>
                            <Text style={{fontSize:12}}>其他方式登录</Text>
                        </View>
                        <View style={styles.icons}>
                            <TouchableOpacity activeOpacity={0.6}>
                                <Image source={require("../../res/icon1.png")} style={styles.icon}/>
                            </TouchableOpacity>
                            <TouchableOpacity activeOpacity={0.6}>
                                <Image source={require("../../res/icon2.png")} style={[styles.icon,styles.icon]}/>
                            </TouchableOpacity>
                            <TouchableOpacity activeOpacity={0.6}>
                                <Image source={require("../../res/icon3.png")} style={styles.icon}/>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{    //最大的盒子
        flex:1,
        backgroundColor:"#eee",
        alignItems:"center"
    },
    wrap:{
        width:320,
        height,
        backgroundColor:"#eee",
        alignItems:"center"
    },
    avatar:{
        width:60,
        height:60,
        borderRadius:30,
        borderWidth:1,
        borderColor:"#fff",
        marginTop:60,
        marginBottom:30
    },
    txt:{
        width:"100%",
        height:40,
        backgroundColor:"#fff",
        paddingLeft:10,
    },
    username:{
        marginBottom:3
    },
    loginBtn:{
        width:"100%",
        height:40,
        alignItems:"center",
        backgroundColor:"skyblue",
        borderRadius:4,
        marginTop:20
    },
    loginText:{
        lineHeight:40,
        color:"#fff"
    },
    newUser:{
        flexDirection:"row",          //主轴方向改为横向
        justifyContent:"space-between",  //主轴的对齐方式
        width:"100%",              //文字所在的盒子的宽度
        marginTop:10
    },
    others:{
        width:"100%",
        position:"absolute",           //定位
        bottom:40,
        alignItems:"center"
    },
    line:{
        width:"100%",
        height:1/scale,
        backgroundColor:"#999"
    },
    othersTitle:{
        marginTop:-8,
        backgroundColor:"#eee",
        paddingLeft:10,
        paddingRight:10,


    },
    icons:{
        flexDirection:"row",
        marginTop:10
    },
    icon:{
        width:30,
        height:30,
        borderRadius:15,
        marginRight:10,
        marginLeft:10
    },
    iconSnd:{
        marginLeft:15,
        marginRight:15,
    }
})