React Native商城项目实战09 - 个人中心自定义cell

本文链接：https://blog.youkuaiyun.com/github_26672553/article/details/52291495

本文介绍了一个React Native自定义单元格组件的创建过程及其使用方法。该组件支持左侧和右侧图标及文本，并提供了点击反馈。此外，还展示了如何在Mine.js文件中引入并使用这个自定义组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建组件CommonMyCell.js
这里写图片描述

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

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Platform,
} from 'react-native';

// ES5
var MyCell = React.createClass({
    getDefaultProps(){
        return{
            leftIconName:'',    // cell左侧图标
            leftTitle:'',   // cell左侧标题
            rightIconName:'',   //  cell右侧图标
            rightTitle:'',  // cell右侧标题
        }
    },

    render() {
        return (
            <TouchableOpacity onPress={()=>{alert('点击了')}}>
                <View style={styles.container}>
                    <View style={styles.leftViewStyle}>
                        <Image source={{uri:this.props.leftIconName}} style={styles.leftImgStyle} />
                        <Text style={styles.leftTitleStyle}>{this.props.leftTitle}</Text>
                    </View>
                    <View style={styles.rightViewStyle}>
                        {this.rightSubView()}
                    </View>
                </View>
            </TouchableOpacity>
        );
    },

    // cell右侧子视图
    rightSubView(){
        return(
            <View style={{flexDirection:'row',alignItems:'center'}}>
                {this.renderRightContent()}
                <Image source={{uri:'icon_cell_rightArrow'}} style={{width:8, height:13, marginRight:8, marginLeft:5}} />
            </View>
        )
    },

    // cell右侧具体内容
    renderRightContent(){
        if(this.props.rightIconName.length == 0){   // 不返回图片
            return(
                <Text style={{color:'gray'}}>{this.props.rightTitle}</Text>
            )
        }else{
            <Image source={{uri:this.props.rightIconName}} style={{width:24, height:13}} />
        }
    },
});

const styles = StyleSheet.create({
    container: {
        // 主轴的方向
        flexDirection:'row',
        // 主轴的对齐方式
        justifyContent:'space-between',
        // 背景颜色
        backgroundColor:'white',
        // 垂直居中
        alignItems:'center',
        // 高度
        height:Platform.OS == 'ios' ? 40 : 36,

        // 下边框
        borderBottomColor:'#e8e8e8',
        borderBottomWidth:0.5
    },
    leftViewStyle:{
        // 主轴的方向
        flexDirection:'row',
        // 侧轴居中
        alignItems:'center',
        // 左外边距
        marginLeft:8
    },

    rightViewStyle:{

    },

    leftImgStyle:{ // 左边的图片
        width:24,
        height:24,
        marginRight:6,
        // 圆角
        borderRadius:12
    },

    leftTitleStyle:{
        fontSize:16
    }
});

// 输出
module.exports = MyCell;

2.Mine.js里如何使用？

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

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView
} from 'react-native';

/*======导入外部组件类======*/
var MyCell = require('./CommonMyCell');

// ES5
var Mine = React.createClass({
    render() {
        return (
            <ScrollView>
                <View style={{marginTop:20}}>
                    <MyCell
                        leftIconName="draft"
                        leftTitle="钱包"
                        rightTitle="账户余额:￥100.88"
                    />
                </View>
            </ScrollView>
        );
    }
});

const styles = StyleSheet.create({

});

// 输出
module.exports = Mine;