React Native ：自定义视图

最新推荐文章于 2024-08-08 08:16:19 发布

findhappy117

最新推荐文章于 2024-08-08 08:16:19 发布

阅读量436

点赞数

文章标签：自定义视频

本文链接：https://blog.csdn.net/findhappy117/article/details/79502262

版权

这篇博客介绍了如何在React Native中实现自定义的顶部标签视图，包括请求数据、自定义视图组件、传递数据、设置标签可选及改变偏移量以实现自动居中。作者提供了详细的代码实现和生命周期方法的使用，并给出了完整的效果展示和代码结构图。

摘要由CSDN通过智能技术生成

代码地址如下：
http://www.demodashi.com/demo/11686.html

这次我们要做的仿 新闻头条 的首页的顶部标签列表，不要在意新闻内容。

请求数据

首先做顶部的目录视图，首先我们先获取数据：

在 Home.js 中加入方法:

componentDidMount() {
        let url = 'http://api.iapple123.com/newscategory/list/index.html?clientid=1114283782&v=1.1'
        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })
            .then((res) => {
                res.json()
                    .then((json) =>{
                        LOG('GET SUCCESS =>',url, json)

                    })
                    .catch((e) => {
                        LOG('GET ERROR then =>',url,e)

                    })
            })
            .catch((error) => {
                LOG('GET ERROR=>',url, '==>',error)
            })
    }

componentDidMount()是在此页面加载完成后由系统调用。

用到的 LOG 需要在 setup.js 添加全局方法 :

global.LOG = (...args) => {

    if(__DEV__){
        // debug模式
        console.log('/------------------------------\\');
        console.log(...args);
        console.log('\\------------------------------/');
        return args[args.length - 1];
    }else{
        // release模式
    }

};

完整的生命周期可以看这个文档

我们使用 fetch 进行请求数据，你也可以用这里的方法进行请求数据。

注意在 iOS 中需要去 Xcode 打开 ATS。

自定义视图

在 Home 文件夹内创建 SegmentedView.js

先定义一个基础的 View

import React from 'react'

import {
    View,
    StyleSheet,
    Dimensions
} from 'react-native'
const {width, height} = Dimensions.get('window')

export default class SegmentedView extends React.Component {
    render() {
        const { style } = this.props
        return (
            <View style={[styles.view, style]}>

            </View>
        )
    }
}


const styles = StyleSheet.create({
    view: {
        height: 50,
        width: width,
        backgroundColor: 'white',
    }
})

这里的 const {width, height} = Dimensions.get('window') 是获取到的屏幕的宽和高。

然后在 Home.js 加入 SegmentedView:

import SegmentedView from './SegmentedView'

    render() {
        return (
            <View style={styles.view}>
                <NavigationBar
                    title="首页"