React Native UI NIKE商城

最新推荐文章于 2024-06-21 09:33:29 发布
最新推荐文章于 2024-06-21 09:33:29 发布
阅读量811 收藏 1
点赞数
分类专栏： React Native 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxyoucan/article/details/109450877
版权

发现了一个写的不错的UI，分享给大家。

界面效果

主要代码

/* eslint-disable prettier/prettier */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    FlatList,
    TouchableOpacity,
    Image,
    Modal
} from 'react-native';

import {BlurView} from '@react-native-community/blur';
import {
    Svg,
    Polygon
} from 'react-native-svg';

import {images,FONTS,SIZES,icons,COLORS} from '../constants'
const Home = () => {
    const [showAddToBagModal,setShowAddToBagModal] = React.useState(false);
    const [selectedItem,setSelectedItem] = React.useState(null);
    const [selectedSize,setSelectedSize] = React.useState("");
    // Dummy Data
    const [trending, setTrending] = React.useState([
        {
            id: 0,
            name: "Nike Air Zoom Pegasus 36",
            img: images.nikePegasus36,
            bgColor: "#BF012C",
            type: "RUNNING",
            price: "$186",
            sizes: [6, 7, 8, 9, 10]
        },
        {
            id: 1,
            name: "Nike Metcon 5",
            img: images.nikeMetcon5Black,
            bgColor: "#D39C67",
            type: "TRAINING",
            price: "$135",
            sizes: [6, 7, 8, 9, 10, 11, 12]
        },
        {
            id: 2,
            name: "Nike Air Zoom Kobe 1 Proto",
            img: images.nikeZoomKobe1Proto,
            bgColor: "#7052A0",
            type: "BASKETBALL",
            price: "$199",
            sizes: [6, 7, 8, 9]
        },
    ]);

    const [recentlyViewed, setRecentlyViewed] = React.useState([
        {
            id: 0,
            name: "Nike Metcon 4",
            img: images.nikeMetcon4,
            bgColor: "#414045",
            type: "TRAINING",
            price: "$119",
            sizes: [6, 7, 8]
        },
        {
            id: 1,
            name: "Nike Metcon 6",
            img: images.nikeMetcon6,
            bgColor: "#4EABA6",
            type: "TRAINING",
            price: "$135",
            sizes: [6, 7, 8, 9, 10, 11]
        },
        {
            id: 2,
            name: "Nike Metcon 5",
            img: images.nikeMetcon5Purple,
            bgColor: "#2B4660",
            type: "TRAINING",
            price: "$124",
            sizes: [6, 7, 8, 9]
        },
        {
            id: 3,
            name: "Nike Metcon 3",
            img: images.nikeMetcon3,
            bgColor: "#A69285",
            type: "TRAINING",
            price: "$99",
            sizes: [6, 7, 8, 9, 10, 11, 12, 13]
        },
        {
            id: 4,
            name: "Nike Metcon Free",
            img: images.nikeMetconFree,
            bgColor: "#A02E41",
            type: "TRAINING",
            price: "$108",
            sizes: [6, 7, 8, 9, 10, 11]
        },
    ]);

    // Render
    function renderTrendingShoes(item,index) {
        let trendingStyle = {};
        if(index ==0) {
            trendingStyle = {marginLeft: SIZES.padding}
        }

        return (
            <TouchableOpacity
                style={{height:240,width:180,justifyContent:'center',marginHorizontal:SIZES.base,...trendingStyle}}
                onPress={()=>{
                    setSelectedItem(item);
                    setShowAddToBagModal(true);
                }}
            >
                <Text style={{color:COLORS.gray,...FONTS.h5}}>{item.type}</Text>
                <View
                    style={[{
                        flex:1,
                        justifyContent:'flex-end',
                        marginTop:SIZES.base,
                        borderRadius:10,
                        marginRight:SIZES.padding,
                        paddingLeft:SIZES.radius,
                        paddingRight:SIZES.padding,
                        paddingBottom:SIZES.radius,
                        backgroundColor: item.bgColor
                    },styles.trendingShadow]}
                >
                    <View style={{height:'35%',justifyContent:'space-between'}}>
                        <Text style={{color:COLORS.white,...FONTS.body4}}>{item.name}</Text>
                        <Text style={{color:COLORS.white,...FONTS.h3}}>{item.price}</Text>
                    </View>
                </View>

                <View style={{position:'absolute',top:27,right:0,width:'95%',height:'100%',elevation: 8}}>
                    <Svg height='100%' width='100%'>
                        <Polygon
                            points="0,0 160,0 160,80"
                            fill="white"
                        />
                    </Svg>
                </View>

                <View
                    style={{
                        position:'absolute',
                        elevation: 9,
                        top: 0,
                        width:"100%",
                    }}
                >
                    <Image
                        source={item.img}
                        resizeMode="cover"
                        style={{
                            position:'absolute',
                            zIndex: 3,
                            top: 50,
                            right:0,
                            width:"98%",
                            height:80,
                            transform :[
                                {rotate:'-15deg'}
                            ]
                        }}
                    />
                </View>

            </TouchableOpacity>
        )
    }

    function renderRecentlyViewed(item,index) {
        return (
            <TouchableOpacity
                style={{flex:1,flexDirection:'row'}}
                onPress={()=>{
                    setSelectedItem(item);
                    setShowAddToBagModal(true);
                }}
            >
                <View
                    style={{flex:1,alignItems:"center",justifyContent:'center'}}
                >
                    <Image
                        source={item.img}
                        resizeMode="contain"
                        style={{
                            width:130,
                            height:100,
                        }}
                    />
                </View>

                <View style={{flex:1.5,marginLeft: SIZES.radius,justifyContent:'center'}}>
                    <Text style={{color:COLORS.gray,...FONTS.body3}}>{item.name}</Text>
                    <Text style={{...FONTS.h3}}>{item.price}</Text>
                </View>
            </TouchableOpacity>
        )
    }
    function renderShoeSizes() {
        return (
            selectedItem.sizes.map((item,index) => {
                return (
                    <TouchableOpacity
                        key={index}
                        style={{
                            width:35,
                            height:25,
                            alignItems:'center',
                            justifyContent:'center',
                            marginHorizontal:5,
                            marginBottom:10,
                            borderWidth:1,
                            borderColor:COLORS.white,
                            borderRadius:5,
                            backgroundColor: selectedItem.sizes[index] == selectedSize ? COLORS.white:null,
                        }}
                        onPress={() => {
                            setSelectedSize(item)
                        }}
                    >
                        <Text style={{color:selectedItem.sizes[index] ==selectedSize?COLORS.black:COLORS.white,...FONTS.body4}}>{item}</Text>
                    </TouchableOpacity>
                )
            })
        )
    }
    return (
        <View style={styles.container}>
            <Text style={{marginTop:SIZES.radius,marginHorizontal:SIZES.padding,...FONTS.largeTitleBold}}>TRENDING</Text>

            {/* Trending */}
            <View style={{height:260,marginTop:SIZES.radius}}>
                <FlatList
                    horizontal
                    showsHorizontalScrollIndicator={false}
                    data={trending}
                    keyExtractor={item=>item.id.toString()}
                    renderItem={({item,index})=> renderTrendingShoes(item,index)}
                />
            </View>

            {/*Recently Viewed*/}
            <View
                style={[{
                    flex:1,
                    flexDirection: 'row',
                    marginTop: SIZES.padding,
                    borderTopLeftRadius:30,
                    borderTopRightRadius:30,
                    backgroundColor: COLORS.white,
                },styles.recentContainerShadow]}
            >
                <View
                    style={{width:70,marginLeft:SIZES.base}}
                >
                    <Image
                        source={images.recentlyViewedLabel}
                        resizeMode='contain'
                        style={{
                            width:'100%',
                            height:'100%'
                        }}
                    />

                </View>
                <View
                    style={{flex: 1,paddingBottom:SIZES.padding}}
                >
                    <FlatList
                        showsVerticalScrollIndicator={false}
                        data={recentlyViewed}
                        keyExtractor={item => item.id.toString()}
                        renderItem={({item,index})=> renderRecentlyViewed(item,index)}
                    />
                </View>
            </View>

            {/* Modal */}
            {
                selectedItem &&
                <Modal
                    animationType="slide"
                    transparent={true}
                    visible={showAddToBagModal}
                >
                    <BlurView
                        style={{flex:1,alignItems:'center',justifyContent:'center'}}
                        blurType="light"
                        blurAmount={20}
                        reducedTransparencyFallbackColor="white"
                    >

                        {/* Button to close modal*/}
                        <TouchableOpacity
                            style={styles.absolute}
                            onPress={()=>{
                                setSelectedItem(null);
                                setSelectedSize("");
                                setShowAddToBagModal(false);
                            }}
                        >
                        </TouchableOpacity>

                        {/* Modal Content*/}
                        <View style={{justifyContent:"center",width:"85%",backgroundColor: selectedItem.bgColor}}>
                            <View style={{alignItems:"center",justifyContent:"center",marginTop:-SIZES.padding}}>
                                <Image
                                    source={selectedItem.img}
                                    resizeMode="contain"
                                    style={{
                                        width:"90%",
                                        height:170,
                                        transform:[
                                            {rotate:'-15deg'}
                                        ]
                                    }}
                                />
                            </View>
                            <Text style={{ marginTop: SIZES.padding, marginHorizontal: SIZES.padding, color: COLORS.white, ...FONTS.body2 }}>{selectedItem.name}</Text>
                            <Text style={{ marginTop: SIZES.base / 2, marginHorizontal: SIZES.padding, color: COLORS.white, ...FONTS.body3 }}>{selectedItem.type}</Text>
                            <Text style={{ marginTop: SIZES.radius, marginHorizontal: SIZES.padding, color: COLORS.white, ...FONTS.h1 }}>{selectedItem.price}</Text>
                            <View style={{flexDirection:'row',marginTop:SIZES.radius,marginHorizontal:SIZES.padding}}>
                                <View>
                                    <Text style={{color:COLORS.white,...FONTS.body3}}>Select Size</Text>
                                </View>
                                <View style={{flex:1,flexWrap:'wrap',flexDirection:'row',marginLeft: SIZES.radius}}>
                                    {renderShoeSizes()}
                                </View>
                            </View>


                            <TouchableOpacity
                                style={{
                                    width:'100%',
                                    height:70,
                                    marginTop:SIZES.base,
                                    alignItems:'center',
                                    justifyContent:'center',
                                    backgroundColor:'rgba(0,0,0,0.5)'
                                }}
                                onPress={()=>{
                                    setSelectedItem(null);
                                    setSelectedSize("");
                                    setShowAddToBagModal(false);
                                }}
                            >
                                <Text style={{color:COLORS.white,...FONTS.largeTitleBold}}>Add to Bag</Text>
                            </TouchableOpacity>
                        </View>

                    </BlurView>
                </Modal>
            }
        </View>
    );
};

const styles = StyleSheet.create({
    container:{
        flex: 1,
        backgroundColor: COLORS.white
    },
    //阴影效果
    trendingShadow:{
        shadowColor:"#000",
        shadowOffset: {
            width:0,
            height:5,
        },
        shadowOpacity:0.29,
        shadowRadius: 4.65,
        elevation: 7
    },
    recentContainerShadow:{
        shadowColor:"#000",
        shadowOffset: {
            width: 0,
            height: 7,
        },
        shadowOpacity: 0.43,
        shadowRadius: 9.51,
        elevation: 15
    },
    absolute:{
        position: 'absolute',
        top:0,
        left:0,
        bottom:0,
        right:0,
    }
})

export default Home;

源码下载

方式1原版代码 github:

https://github.com/byprogrammers/lets-code-react-native/tree/master/LCRN05-nike-shoes-ecommerce-app

方式2 我微调过的，修复了，原版本的安卓版本显示异常的问题：

https://download.csdn.net/download/lxyoucan/13082622

 

 

ITKEY_
关注
专栏目录
用React-Native+Mobx做一个迷你水果商城APP(附源码)
08-28
主要介绍了用React-Native+Mobx做一个迷你水果商城APP,功能需要的朋友可以参考下
React-Native 版高仿淘宝、京东商城首页、商品分类页面
m0_46962786的博客
10-11 1126
前言 正在做商城项目的同学有福啦，看看是你们想要的效果吗？ 项目地址：https://github.com/pengzhenjin/react-native-mall 效果图 已实现功能 沉浸式状态栏 酷炫的顶部导航动画 消息角标 循环轮播图 搜索 商品一级分类 商品二级分类 商品子分类 顶部滑动的tab、智能下拉菜单 用到的技术 自定义 Badge（角标） 动画、动画插值器 Swiper 轮播图 自定义 tab 自定义 popup 弹窗下拉菜单 FlatList、SectionList 重点代码
react-native商城项目
宏斌的博客
05-20 914
react-native小demo 最近学习了一点基础的react后上手了react-native，上手不难就是写法适应了就好，对于这个小项目期间最大的收获就是：有一定基础了，就可以看官方文档了，别有问题就百度，百度上有些憨批写的东西因为版本或者内容本身有些问题，容易误事，比如我的这个项目在按照一些博客文章配置下打包后已经拉了，配置的啥也不知道，项目现在已经打不开了，掉了老夫一天的头发，...
ReactNative 开源UI 套件
2401_84122826的博客
04-11 1483
UI这块知识是现今使用者最多的。当年火爆一时的Android入门培训，学会这小块知识就能随便找到不错的工作了。不过很显然现在远远不够了，拒绝无休止的CV,亲自去项目实战，读源码，研究原理吧！
MaterialDesign风格的ReactNativeUI组件集
08-10
Material Design风格的React Native UI组件集
react-native-ui-lib：React Native的UI组件库
02-01
用于React Native的UI工具集和组件库 查看我们的。 我们的 下载我们的Expo演示应用 （您将需要Expo App） 正在安装 请参阅安装说明。 新的主要版本5.0 查看 对于React Native> = 0.60.0 请使用react-native-ui-...
react-native-elements：跨平台React Native UI工具包
01-30
作为一个跨平台的UI工具包，您现在可以在Web上使用RNE并在React Native + React Web应用程序之间共享代码库。 RNE组件可以在浏览器上完美呈现。 您可以通过将RNE和协作来实现针对iOS，Android和Web的目标。 单击，...
react-native-ui-components:React Native的一些UI组件
05-01
该项目是通过。... 升级到React Native的新版本需要更新react-native ， react和expo软件包版本，并在app.json设置正确的sdkVersion 。 有关软件包版本兼容性的最新信息，请参见版本控制指南。 可用脚本
ReactVirgin一套reactnativeUI工具包
08-10
React Virgin 是一个专门为 React Native 开发者设计的 UI 工具包，旨在简化移动应用界面的设计和实现过程。React Native 是 Facebook 推出的一个开源框架，它允许开发者使用 JavaScript 和 React 框架来构建原生的 ...
NativeBase：React Native的基本跨平台UI组件
02-02
React Native的基本跨平台UI组件 更新了文档 表中的内容 1.什么是NativeBase？ 是由充满激情的React Loving团队创建的一种时尚，巧妙且动态的前端框架，用于使用可立即使用的React Native通用组件构建跨平台的...
react-native-base-ui:一个实现基础设计语言的React Native Component库
04-14
基本用户界面 Base是一个包含现代，响应式，实时组件的设计系统。 Base UI是Base的React Native实现。 该项目是的重写实现，但适用于React Native，React Native Web和React Native桌面（Windows，MacOS，Linux） 安装 首先，您需要安装该库 yarn add @gorhom/base-ui 然后确保运行react-native link ，以确保已安装所需的字体。 yarn react-native link 用法 // @TODO 贡献 该库仍处于开发初期，需要您的帮助和支持才能使其稳定下来。 单击此处以。 作者 执照 喜欢图书馆吗？ :smiling_face_with_halo:
java版商城源码下载-shop-reactnative:如玉蕊
06-05
java版商城源码下载 Shop-React-Native Shop-React-Native 是基于 React Native 和 Redux 实现的电商类APP，同时运行在iOS和Android平台上。持续更新中，欢迎一起讨论学习！ 如果你支持这个项目，请 Star and Fork Me。 注：有任何问题请在Issues提交，EleTeam会尽快回复。 EleTeam开源项目 - 电商全套解决方案之 React Native 版 - Shop-React-Native。一个类似京东/天猫/淘宝的商城，有对应的服务端支持，由EleTeam团队维护！ 服务端是PHP商城，对应项目是 Shop-PHP-Yii2， 功能如下: 支持下拉刷新和上拖加载更多 广告模块 文章模块 用户模块 产品模块 购物车模块 订单模块 地址模块 分享&收藏 营销模块 依赖组件: "dependencies": { "react": "15.3.1", //react框架 "react-native": "0.33.0", //react native "react-native-device-info":
reactnativeuilib是ReactNative的UI组件库和工具集
08-07
相较于react-native-elements，react-native-ui-lib最大的优点，就是额外提供了View、Text、Button等基础组件的便捷布局能力
React Native 快速搭建商城项目基础结构帖子附件代码
11-15
React Native 快速搭建商城项目基础结构帖子附件代码，下载此代码配合帖子流程，可以在搭建React Native 商城项目或者其他项目搭建的时候快速建成！
深度探索React Native原生UI组件库 - 构建流畅且高效的应用体验
最新发布
gitblog_00074的博客
06-21 753
???? 深度探索React Native原生UI组件库 - 构建流畅且高效的应用体验 项目地址:https://gitcode.com/sdcxtech/react-native-troika 目录: 项目介绍 技术深度解析 应用场景展示 独特优势剖析 ???? 项目介绍 在现代移动应用开发领域中，追求极致的用户体验与高效率的开发流程成为了每个开发者心中的圣杯。为满足这一需求，我们荣幸地介绍一款集众...
React Native调用原生UI组件
xiangzhihong8的专栏
07-03 3044
在React Native 中，其已经将几个常用的原生组件进行了封装，但是并不是所有系统的原始组件都被封装了，因此有时候我们不得不自己动手封装一下，从而能够使用那些React Native没有为我们封装的原生组件。为了方便讲解，我们选择第一个第三方库kenburnsview来讲解，kenburnsview是一个可以让图片在在页面移动或者放大缩小的库。Android原生组件封装1，继承SimpleVi
React Native UI布局总结
chuertui2299的博客
12-27 293
1.在React Native（RN）中提供了只有两种布局，分别是：absolute和relative。 如果你之前是搞安卓开发的会觉得RN设计非常怪异，在我们安卓原生开发中，决定用什么布局的是由parent决定的，如：AbsoluteLayout和RelativeLayout,...
React Native商城项目实战03 - 包装Navigator
08-20 1374
知识点 Navigator的基本用法 回顾前面已经学习过的NavigatorIOS1.在Home目录下新建首页详细页HomeDetail.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';
react nativeui库
06-08
React Native有许多UI库可供选择，以下是其中一些常用的UI库： 1. React Native Elements：提供各种常见UI组件，如按钮、图标、卡片等。 2. NativeBase：基于React Native Elements，提供更多的UI组件和主题定制功能。 3. Ant Design Mobile RN：提供类似Ant Design的UI组件库，适用于快速开发高质量的移动应用。 4. React Native Paper：提供Material Design样式的UI组件库。 5. Shoutem UI：提供丰富多样的UI组件和主题定制功能。 6. UI Kitten：提供漂亮的UI组件和主题定制功能。 以上是一些常用的React Native UI库，您可以根据自己的需求选择使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值