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