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}) => (
            <View>
                <TouchableOpacity
                    style={[styles.leftBtnDefaultStyle, this.state.indexSelected === item.city && styles.leftBtnSelectedStyle]}
                    onPress={() => {this._onClickItem(item, index)}}>
                    <View style={styles.viewStyle}>
                        <Text style={styles.textStyle}>
                            {item.city}
                        </Text>
                    </View>
                </TouchableOpacity>
                {
                    index === this.props.dataList.length - 1 ?
                        <View/>
                        :
                        <View
                            style={styles.lineStyle}/>
                }
            </View>
        )

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

    render() {
        return (
            <FlatList
                style={styles.containerStyle}
                extraData={this.state}
                data={this.props.dataList}
                scrollEnabled={true}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}/>
        )
    }
}

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}) => (
            <TouchableOpacity
                onPress={this.doWhatYouLike.bind(this, item)}>
                <ImageBackground style={styles.itemImgBgStyle} source={{uri: item.appUrl}}>
                    <Text style={styles.titleStyle}>{item.mallName}</Text>
                    <Text style={styles.addressStyle}>{item.address}</Text>
                </ImageBackground>
            </TouchableOpacity>
        )

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

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

    render() {
        return (
            <ImageBackground style={{flex: 1}} source={ThemeImage(Module.common, ImagesKeys.appBg)}>
                <View style={[styles.containerStyle, styles.flexDirection]}>
                    <View style={styles.leftMenuStyle}>
                        <LeftCitySection
                            dataList={this.state.data}
                            onItemSelected={this._onMenuItemSelected.bind(this)}/>
                    </View>
                    <FlatList
                        extraData={this.state}
                        data={this.state.showRightContent}
                        scrollEnabled={true}
                        keyExtractor={this._keyExtractor}
                        renderItem={this._renderItem}/>
                </View>
           </ImageBackground>
        )
    }
}

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.选中的功能，如果是选中当前的数据，则进行变下面是实现的截图，以供参考