react native九宫格的实现（具有可扩展性）

最新推荐文章于 2022-02-24 20:24:02 发布

普莫柯

最新推荐文章于 2022-02-24 20:24:02 发布

阅读量1k

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/qq_21478985/article/details/80529202

版权

React Native 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

封装单独的组件

class Info extends Component{
    render(){
        var index=this.props.index;
        return(
            <TouchableHighlight underlayColor='#eee' onPress={()=>{}} style={styles.touchView}>
                <View style={[styles.singleView]}>
                    <View style={{height:70}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                        </View>
                        <Text style={{marginTop:6,fontSize:14,color:"#999999"}}>未完成</Text>
                    </View>
                </View>
            </TouchableHighlight>
        )
    }
}

实现九宫格（数量没有限制）

export default class accountApply extends Component{
    constructor(props){
        super(props)
    }

    render(){
        console.log(StatusBar.currentHeight)
        var arr=[];
        for(var i=0;i<info.length;i++){
            arr.push( <Info index={i} key={i}/>)
        }
        return(
            <View style={styles.container}>
                <ScrollView>
                    <View style={{padding:10,flexDirection:'row',flexWrap:'wrap'}}>
                        {arr}
                    </View>
                </ScrollView>
            </View>

        )
    }
}

样式如下：

const styles=StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f2f5',
    },
    header:{
        width:Utils.ScreenWidth,
        height:Utils.headerBodyHeight,
        marginTop:Utils.statusHeight,
        alignItems:'center',
        justifyContent:'center'
    },
    headerBg:{
        width:Utils.ScreenWidth,
        height:Utils.headerHeight,
        position:'absolute',
        top: 0,
    },
    headerTitle:{
        fontSize:19,
        color:'#fff',
        backgroundColor:'transparent'
    },
    backView:{
        height:Utils.headerBodyHeight,
        position:'absolute',
        left:15,
        top:Utils.statusHeight,
        flexDirection:'row',
        alignItems:'center'
    },
    backText:{
        marginLeft:5,
        fontSize:15,
        color:'#fff',
        backgroundColor:'transparent'
    },
    submitView:{
        position:'absolute',
        right:15,
        top:Utils.statusHeight,
        justifyContent:'center',
        height:Utils.headerBodyHeight,
    },
    submitText:{
        fontSize:15,
        color:'#fff',
        backgroundColor:'transparent'
    },
    touchView:{
        width:(Utils.ScreenWidth-60)/2,
        backgroundColor:'#fff',
        margin:10,
        borderRadius:5
    },
    singleView:{
        height:100,
        paddingLeft:15,
        borderRadius:5,
        justifyContent:'center',
        overflow:'hidden'

    },
    bgImg:{
        width:74,
        height:62,
        position:'absolute',
        right:-15,
        bottom:-15
    },
    infoName:{
        fontSize:16,
        color:'#444444',
        paddingTop:0
    },
    infoIcon:{
        marginLeft:10,
        width:14,
        height:14
    }

})

效果如下：