react native开发：实现点击左侧选择项，右侧显示内容的功能

需求：

界面分为左右两部分，左侧为选择栏，右侧为显示的内容，点击左侧选择项，右侧显示内容的功能 如下图：

思路：

首先思考问题：

****1. 如何实现左侧栏，点击组件改变颜色？ 2. 如何实现点击左侧选项，右侧显示想要内容？

如何实现左侧栏，点击组件改变颜色？

在style中通过条件判断改变样式

如何实现点击左侧选项，右侧显示想要内容？

将左侧被选中的标识，作为参数，通过props回调父组件的方法，该回调方法根据左侧标识，在右侧显示对应的内容

代码

左侧选择栏SettingMenu.js

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Dimensions, ScrollView, Text, TouchableOpacity, Image, View, } from 'react-native'; const window = Dimensions.get('window'); export default class SettingMenu extends Component { constructor(props) { super(props); this.state = { itemSelected: '通讯方式', }; this._onClickItem = this._onClickItem.bind(this); } render() { return ( <ScrollView style={styles.contantStyle} showsVerticalScrollIndicator={false}> {/*选项菜单*/} {this._selectItem('通讯方式')} {this._selectItem('设置3G服务IP地址')} {this._selectItem('交易地点')} {this._selectItem('清空考勤记录')} {this._selectItem('初始化设备')} {this._selectItem('修改密码')} {this._selectItem('关于我们')} {this._selectItem('退出')} </ScrollView> ); } _selectItem(item) { return ( <TouchableOpacity style={styles.itemTextView} onPress={() => { this._onClickItem(item) }}> <Text style={[ styles.itemDefaultColor, this.state.itemSelected === item && styles.itemSelectedColor ]} > {item} </Text> </TouchableOpacity> ) } _onClickItem(itemTextContant) { this.setState({ itemSelected: itemTextContant, }); //传递数据到右边显示组件 this.props.onItemSelected(itemTextContant); } }; const styles = StyleSheet.create({ contantStyle: { backgroundColor: 'white', }, itemTextView: { height: 60, width: window.width / 4, justifyContent: 'center', borderBottomColor: 'gray', borderBottomWidth: 1, marginLeft: 10, marginRight: 10, }, item: { fontSize: 16, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', }, itemDefaultColor: { color: 'gray', }, itemSelectedColor: { color: '#00bfff' } });

父组件Setting.js

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, TextInput, Image, Dimensions, View, Modal, Button, PixelRatio, TouchableOpacity, } from 'react-native'; import NavigationBar from 'react-native-navbar'; import LeftMenu from './SettingMenu.js';//导入 菜单 组件 const window = Dimensions.get('window'); export default class Setting extends Component { constructor(props) { super(props); this.state = { selectedItem: '通讯方式', showRightContant: '通讯方式', }; this._onMenuItemSelected = this._onMenuItemSelected.bind(this); } render() { return ( <View style={styles.flex}> {/*标题栏*/} <NavigationBar tintColor='#00bfff' title={{ title: '设置', tintColor: 'white' }} /> {/*内容*/} <View style={[styles.container, styles.flexDirection]}> {/*左侧选择栏*/} <View style={styles.leftMenuStyle}> <LeftMenu onItemSelected={this._onMenuItemSelected} /> </View> {/*右侧显示内容*/} <View style={styles.rightContantSyle}> <Text>{this.state.showRightContant}</Text> </View> </View> </View> ); } _onMenuItemSelected(leftContant) { this.setState({ showRightContant: leftContant, }); } } const styles = StyleSheet.create({ flex: { flex: 1, }, flexDirection: { flexDirection: 'row', }, center: { justifyContent: 'center', alignItems: 'center', }, leftMenuStyle: { borderRightColor: 'grey', borderRightWidth: 1, }, rightContantSyle: { flex: 1, }, container: { flex: 1, backgroundColor: '#F5FCFF', }, });