React Native ：自定义视图

迈不过友情╰ 2022-05-30 10:07 257阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/11686.html][http_www.demodashi.com_demo_11686.html]

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

![IMG_1169.PNG_raw_true][]

## 请求数据 ##

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

在 `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模式
        }
    
    };

完整的生命周期可以看这个 [文档][Link 1]

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

注意在 `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="首页" unLeftImage={true} /> <SegmentedView style={ {height: 30}} /> </View> ) }

`SegmentedView` 中 `const { style } = this.props` 获取到的就是这里设置的 `style={height: 30}` 。

`<View style={[styles.view, style]}>` 这样设置样式，数组中的每一个样式都会覆盖它前面的样式，不过只会覆盖有的 `key-value`，比如这里 `style={height: 30}` ，它只会覆盖掉前面的 `height` ，最终的样式为 :

{
        height: 30,
        width: width,
        backgroundColor: 'white',
    }

## 传数据 ##

请求到的数据需要传给 `SegmentedView` 来创建视图，我们在 `Home.js` 加入构造，现在的 `Home.js` 是这样的：

import React from 'react'
    
    import {
        View,
        StyleSheet
    } from 'react-native'
    
    import NavigationBar from '../Custom/NavBarCommon'
    import SegmentedView from './SegmentedView'
    
    export default class Home extends React.Component {
    
        // 构造
          constructor(props) {
            super(props);
            // 初始状态
            this.state = {
                list: null
            };
          }
    
        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)
    
                            this.setState({
                                list: json.CategoryList
                            })
                        })
                        .catch((e) => {
                            LOG('GET ERROR then =>',url,e)
                        })
                })
                .catch((error) => {
                    LOG('GET ERROR=>',url, '==>',error)
                })
        }
    
        render() {
            return (
                <View style={styles.view}> <NavigationBar title="首页" unLeftImage={true} /> <SegmentedView list={this.state.list} style={ {height: 30}} /> </View> ) } } const styles = StyleSheet.create({ view: { flex:1, backgroundColor: 'white' } })

再数据请求完成后调用 `setState()` ，系统会收集需要更改的地方然后刷新页面，所以这个方法永远是异步的。

现在请求完数据后就会把数组传给 `SegmentedView` 了。

再看 `SegmentedView` ，我们需要用一个 `ScrollView` 来放置这些标签：

import React from 'react'
    
    import {
        View,
        StyleSheet,
        Text,
        TouchableOpacity,
        Dimensions,
        ScrollView
    } from 'react-native'
    
    const {width, height} = Dimensions.get('window')
    
    
    // 一 屏最大数量, 为了可以居中请设置为 奇数
    const maxItem = 7
    
    export default class SegmentedView extends React.Component {
    
        // 构造
          constructor(props) {
            super(props);
           // 初始状态
            this.state = {
                itemHeight: 50,
            };
    
              if (props.style && props.style.height > 0) {
                  this.state = {
                      ...this.state,
                      itemHeight: props.style.height,  //如果在使用的地方设置了高度,那么保存起来方便使用
                  };
              }
              this._getItems = this._getItems.bind(this)
          }
    
        _getItems() {
            const { list } = this.props  //获取到 传入的数组
    
            if (!list || list.length == 0) return []
    
           // 计算每个标签的宽度
            let itemWidth = width / list.length
    
            if (list.length > maxItem) {
                itemWidth = width / maxItem
            }
    
            let items = []
            for (let index in list) {
                let dic = list[index]
                items.push(
                    <View key={index} style={ {height: this.state.itemHeight, width: itemWidth, alignItems: 'center', justifyContent:'center',backgroundColor:'#EEEEEE'}} > {/* justifyContent: 主轴居中, alignItems: 次轴居中 */} <Text>{dic.NameCN}</Text> </View> ) } return items } render() { const { style } = this.props return ( <View style={[styles.view, style]}> <ScrollView style={styles.scrollView} horizontal={true} //横向显示 showsHorizontalScrollIndicator={false} //隐藏横向滑动条 > {this._getItems()} </ScrollView> </View> ) } } const styles = StyleSheet.create({ view: { height: 50, width: width, backgroundColor: 'white', }, scrollView: { flex:1, backgroundColor: '#EEEEEE', } })

## 使标签可选并改变偏移量 ##

现在运行已经可以显示出标签列表了，我们还需要能点击，有选中和未选中状态，所以我们把数组中添加的视图封装一下：

class Item extends React.Component {
        render() {
    
            const {itemHeight, itemWidth, dic} = this.props
    
            return (
                <TouchableOpacity style={ {height: itemHeight, width: itemWidth, alignItems: 'center', justifyContent:'center',backgroundColor:'#EEEEEE'}} > {/* justifyContent: 主轴居中, alignItems: 次轴居中 */} <Text>{dic.NameCN}</Text> </TouchableOpacity> ) } }

我们需要可以点击，所以把 `View` 换成了 `TouchableOpacity`，记得在顶部导入。

然后修改数组的 `push` 方法

items.push(
        <Item key={index} itemHeight={this.state.itemHeight} itemWidth={itemWidth} dic={dic} /> )

现在运行已经可以点击了，接下来设置选中和未选中样式，在 `Item` 内加入:

constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isSelect: false
        };
    }

在 `Text` 加入样式:

<Text style={
       {color: this.state.isSelect ? 'red' : 'black'}}>{dic.NameCN}</Text>

在 `TouchableOpacity` 加入点击事件：

<TouchableOpacity
        style={
       {height: itemHeight, width: itemWidth, alignItems: 'center', justifyContent:'center',backgroundColor:'#EEEEEE'}}
        onPress={() => {
            this.setState({
                isSelect: true
            })
        }}
    >

现在标签已经可以进行点击，点击后变红，我们需要处理点击后让上一个选中的变为未选中，我们给 `Item` 加一个方法：

_unSelect() {
        this.setState({
            isSelect: false
        })
    }

我们还需要接收一个回调函数: `onPress`

const {itemHeight, itemWidth, dic, onPress} = this.props
    
     <TouchableOpacity
        style={
       {height: itemHeight, width: itemWidth, alignItems: 'center', justifyContent:'center',backgroundColor:'#EEEEEE'}}
        onPress={() => {
            onPress && onPress()
            this.setState({
                isSelect: true
            })
        }}
    >

现在去 `items.push` 加入 `onPress` ，我们还需要一个状态 `selectItem` 来记录选中的标签:

// 初始状态
    this.state = {
        itemHeight: 50,
        selectItem: null,
    };

<Item
        ref={index}  //设置 ref 以供获取自己
        key={index}
        itemHeight={
       this.state.itemHeight}
        itemWidth={itemWidth}
        dic={dic}
        onPress={() => {
            this.state.selectItem && this.state.selectItem._unSelect() //让已经选中的标签变为未选中
            this.state.selectItem = this.refs[index]  //获取到点击的标签
        }}
    />

现在运行，就可以选中的时候取消上一个标签的选中状态了，但是我们需要默认选中第一个标签。

我们给 `Item` 加一个属性 `isSelect` ：

<Item
        ref={index}  //设置 ref 以供获取自己
        key={index}
        isSelect={index == 0}
        itemHeight={
       this.state.itemHeight}
        itemWidth={itemWidth}
        dic={dic}
        onPress={() => {
            this.state.selectItem && this.state.selectItem._unSelect() //让已经选中的标签变为未选中
            this.state.selectItem = this.refs[index]  //获取到点击的标签
        }}
    />

修改 `Item` :

constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isSelect: props.isSelect
        };
      }

现在运行发现第一项已经默认选中，但是点击别的标签，发现第一项并没有变成未选中，这是因为 `this.state.selectItem` 初始值为 `null`，那我们需要把第一项标签赋值给它。

由于只有在视图加载或更新完成才能通过 `refs` 获取到某个视图，所以我们需要一个定时器去触发选中方法。

去 `Item` 的 `constructor()` 加入定时器:

constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isSelect: props.isSelect
        };
    
        this.timer = setTimeout(
              () => 
                  props.isSelect && props.onPress && props.onPress() //100ms 后调用选中操作
              ,
              100
            ); 
     }

搞定，最后我们还需要点击靠后的标签可以自动居中，我们需要操作 `ScrollView` 的偏移量，给 `ScrollView` 设置 `ref='ScrollView'`

然后去 `items.push` 加入偏移量的设置：

<Item
        ref={index}
        key={index}
        isSelect={index == 0}
        itemHeight={
       this.state.itemHeight}
        itemWidth={itemWidth}
        dic={dic}
        onPress={() => {
            this.state.selectItem && this.state.selectItem._unSelect()
            this.state.selectItem = this.refs[index]
    
            if (list.length > maxItem) {
                let meiosis = parseInt(maxItem / 2)
                this.refs.ScrollView.scrollTo({x: (index - meiosis < 0 ? 0 : index - meiosis > list.length - maxItem ? list.length - maxItem : index - meiosis ) * itemWidth, y: 0, animated: true})
            }
        }}
    />

## 现在的效果: ##

![effect][]

## 代码结构图 ##

> 代码文件结构

![SOI3uKzZhtAmxnEa30j.png][]

React Native ： 自定义视图

> 代码地址如下：  
> [http://www.demodashi.com/demo/11686.html][http_www.demodashi.com_demo_11686.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_11686.html]: http://www.demodashi.com/demo/11686.html
[IMG_1169.PNG_raw_true]: https://github.com/qiangxinyu/ReactNativeExample/blob/master/ReactNative3/IMG_1169.PNG?raw=true
[Link 1]: https://facebook.github.io/react/docs/react-component.html
[Link 2]: http://reactnative.cn/docs/0.43/network.html#content
[effect]: https://github.com/qiangxinyu/ReactNativeExample/blob/master/ReactNative3/effect.gif?raw=true
[SOI3uKzZhtAmxnEa30j.png]: /images/20220530/f0993548f5a54e7ab1e744ef0bfe5a26.png