react native点击左边组件选择中显示右边的界面

需求,点击左边的按钮选中后显示右边的界面。新手的我查阅网上的代码,终于找到了相关的,加以修改后分享下,主要是增加自己的理解。

代码分两部分,左边的选中按钮,这里是用flatlist写的,看代码

import React, { Component } from 'react'
import {
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    FlatList,
} from 'react-native'
import PropTypes from 'prop-types'

export default class LeftCitySection extends Component {

    constructor(props) {
        super(props)
        this.state = {
            indexSelected: '武汉市',//默认选中
        }
    }

    _onClickItem(item) {
        this.setState({
            indexSelected: item.city,
        })
        //传递数据到右边显示组件
        this.props.onItemSelected(item.data)
    }

    _renderItem = ({item, index}) => (
            
                 {this._onClickItem(item, index)}}>
                    
                        
                            {item.city}
                        
                    
                
                {
                    index === this.props.dataList.length - 1 ?
                        
                        :
                        
                }
            
        )

    _keyExtractor = (item, index) => index.toString()

    render() {
        return (
            
        )
    }
}

LeftCitySection.propTypes = {
    onItemSelected: PropTypes.func,//每次点击选中的回调函数
    dataList: PropTypes.array,
}

let styles = StyleSheet.create({
    containerStyle: {
        backgroundColor: 'transparent',
    },
    leftBtnDefaultStyle: {
        width: 100,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
    },
    leftBtnSelectedStyle: {
        width: 100,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(255, 255, 255, 0)',
    },
    textStyle: {
        textAlign: 'center',
        color: 'white',
        fontSize: 14,
        lineHeight: 22,
    },
    viewStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 70,
        marginBottom: 8,
        marginTop: 8,
        minHeight: 34,
    },
    lineStyle: {
        borderBottomColor: 'orange',
        width: 100,
        borderBottomWidth: StyleSheet.hairlineWidth,
    }
})

其中,下面的代码是作为选中的部分,当然等于的条件(即想选中的条件)可以改成自己想要的,选中后改变style

this.state.indexSelected === item.city && styles.leftBtnSelectedStyle
_onClickItem(item) {
        this.setState({
            indexSelected: item.city,
        })
        //传递数据到右边显示组件
        this.props.onItemSelected(item.data)
    }

上面的代码是回传数据,点击对应的左边的按钮,刷新默认选中之后,显示在右边的区域的数据。

这里的在_renderItem做了一步比较多余的操作:通过index来判断分割线,其实flatList已经有相关的组件了(ItemSeparatorComponent)分割线嘛,哈哈哈。

接下来是主界面的代码:

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    ImageBackground,
    FlatList,
    TouchableOpacity
} from 'react-native'
import LeftCitySection from './LeftCitySection'
import {
    windowWidth,
} from "../../commons/styles/common"
import {ImagesKeys, Module, ThemeImage} from "../../theme/ThemeAdapter";

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showRightContent : [],//默认右边的数据
            data: [{
                "city": "武汉市",
                "data": [{
                    "address": "武汉市黄陂前川",
                    "mallName": "武汉万象城",
                    "appUrl": "",
                }, {
                    "address": "武汉市黄陂前川",
                    "mallName": "武汉万象城",
                    "appUrl": "",
                }
                ],
            },{
                "city": "深圳市",
                "data": [{
                    "address": "深圳湾春茧体育馆附近",
                    "mallName": "深圳万象城",
                    "appUrl": "",
                }, {
                    "address": "深圳湾春茧体育馆附近",
                    "mallName": "深圳万象城",
                    "appUrl": "",
                }
                ],
            },{
                "city": "北京市",
                "data": [{
                    "address": "北京市朝阳区霄云路50号",
                    "mallName": "北京万象城",
                    "appUrl": "",
                }, {
                    "address": "北京市朝阳区霄云路50号",
                    "mallName": "北京万象城",
                    "appUrl": "",
                }
                ],
            },{
                "city": "长沙市",
                "data": [{
                    "address": "湖南省长沙市开福区东风路79号",
                    "mallName": "长沙万象城",
                    "appUrl": "",
                }, {
                    "address": "湖南省长沙市开福区东风路79号",
                    "mallName": "长沙万象城",
                    "appUrl": "",
                }
                ],
            },{
                "city": "南宁市",
                "data": [{
                    "address": "广西壮族自治区南宁市兴宁区朝阳路26号",
                    "mallName": "南宁保利广场",
                    "appUrl": "",
                }, {
                    "address": "广西壮族自治区南宁市兴宁区朝阳路26号",
                    "mallName": "南宁保利广场",
                    "appUrl": "",
                }
                ],
            }]
        }
    }

    _onMenuItemSelected(rightData) {//回调数据
        this.setState({
            showRightContent: rightData,
        })
    }

    _renderItem = ({item}) => (
            
                
                    {item.mallName}
                    {item.address}
                
            
        )

    doWhatYouLike (Item) {
       console.log(item)
    }

    _keyExtractor = (item, index) => index.toString()

    render() {
        return (
            
                
                    
                        
                    
                    
                
           
        )
    }
}

let styles = StyleSheet.create({
    containerStyle: {
        flex: 1,
        backgroundColor: 'transparent',
        flexDirection: 'row',
    },
    leftMenuStyle: {

    },
    itemImgBgStyle: {
        marginTop: 10,
        marginLeft: 11,
        width: windowWidth - 100 - 10 - 10,
        height: 122,
        alignItems: 'center',
    },
    titleStyle: {
        fontSize: 24,
        color: 'white',
        marginTop: 32,
        lineHeight: 36,
    },
    addressStyle: {
        fontSize: 12,
        color: 'white',
        marginTop: 5,
        lineHeight: 18,
    },
})

数据部分的appUrl是一个图片的连接,这里就不给出来了,ImageBackground的source也是图片资源,替换成自己的即可

主界面通过下面的代码

_onMenuItemSelected(rightData) {//回调数据
        this.setState({
            showRightContent: rightData,
        })
    }

刷新右边的数据,这里是左边组件的回调函数,主要是获取对应的数据刷新右边的界面

这里我在main文件初始化话的时候直接this.state.showRightContent(右边的默认数据)给空,其实也应该默认选中第一条数据的,这里有需要的读者自己修正即可

这样就完成了点击左边的按钮刷新右边的界面的功能。

本次主要学习了

1.回调函数的使用,通过函数取出数据,供外面的界面使用

2.分析能力,拿到一个功能,需要将功能分解,细化,找到对的方向才能更好的完成任务

3.选中的功能,如果是选中当前的数据,则进行变下面是实现的截图,以供参考

react native点击左边组件选择中显示右边的界面_第1张图片  react native点击左边组件选择中显示右边的界面_第2张图片

 

你可能感兴趣的:(react,native新手学习)