React Nativeのクリックで動的スタイルを設定するにはどうすればよいですか？

Question

今、2つの項目があります。左項目と右項目。私は結果を実現したい。

最初のレンダリング、左側のアイテムがアクティブ、右側のアイテムがアクティブではありません。正しい項目をクリックすると右側の項目はアクティブで、左側の項目はアクティブではありません。
左のアイテムをクリックしたとき。左の項目はアクティブで、右の項目はアクティブではありません。

アイテムがアクティブな場合、アイテムのテキストは青色で、下の行は緑色です。 項目がアクティブでない場合、項目のテキストは黒で、下の行はなしです。

私のコードは以下のイメージのように動作します。

私のコードは以下の通りです：

import React, {Component, PropTypes} from "react"; 

import { 
    View, 
    Image, 
    Text, 
    ListView, 
    Dimensions, 
    StyleSheet, 
    TouchableOpacity, 
} from 'react-native'; 

const ItemView = ({title, onPress}) => (
    <TouchableOpacity onPress={onPress}> 
     <View style={styles.item}> 
     <Text style={styles.itemTitle}>{title}</Text> 
     </View> 
    </TouchableOpacity> 
); 

const {width} = Dimensions.get('window'); 

class MyOrder extends Component { 

    constructor(props) { 
    super(props); 
    } 

    showService =() =>{ 
    console.log('click Left'); 
    } 

    showReport =() => { 
    console.log('click Right') 
    } 

    render() { 
    return (
     <View style={styles.container}> 
      <View style={styles.content}> 
      <ItemView title="left" onPress={this.showService}/> 
      <ItemView title="right" onPress={this.showReport}/> 
      </View> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 

    container: { 
    flex: 1, 
    }, 
    item: { 
    flex:1, 
    width:'100%', 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'center', 
    paddingLeft: 16, 
    paddingRight: 16, 

    }, 
    activeItem: { 
    borderBottomWidth: 1, 
    borderBottomColor: '#1bbc9b', 
    }, 
    itemTitle: { 
    color: '#44c0fe', 
    fontWeight:'900', 
    fontSize: 16, 
    }, 
    content: { 
    height:48, 
    flexDirection:'row', 
    width: width, 
    backgroundColor: '#fff', 
    justifyContent:'space-around', 
    }, 
}); 

export default MyOrder; 

どのようにそれを実現するために、スタイルを組み合わせ使用しますか？たとえば、style = {[styles.item, styles.activeItem]}です。

Answer 1

あなたはタブが親コンポーネントでアクティブになっているのを追跡することができます：

const ItemView = ({title, onPress, isActive}) => (
    <TouchableOpacity onPress={onPress}> 
     <View style={styles.item}> 
     <Text style={[ 
      styles.itemTitle, 
      isActive ? styles.activeItem : null, 
     ]}>{title}</Text> 
     </View> 
    </TouchableOpacity> 
); 

class MyOrder extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     activeTab: 'left', 
    } 
    } 

    showService =() =>{ 
    console.log('click Left'); 
    this.setState({activeTab: 'left'}); 
    } 

    showReport =() => { 
    console.log('click Right') 
    this.setState({activeTab: 'right'}); 
    } 

    render() { 
    const isActive = (tab) => this.state.activeTab === tab; 
    return (
     <View style={styles.container}> 
      <View style={styles.content}> 
      <ItemView title="left" onPress={this.showService} isActive={isActive('left')} /> 
      <ItemView title="right" onPress={this.showReport} isActive={isActive('right')} /> 
      </View> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 

    container: { 
    flex: 1, 
    }, 
    item: { 
    flex:1, 
    width:'100%', 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'center', 
    paddingLeft: 16, 
    paddingRight: 16, 

    }, 
    activeItem: { 
    borderBottomWidth: 1, 
    borderBottomColor: '#1bbc9b', 
    color: '#44c0fe', 
    }, 
    itemTitle: { 
    color: 'black', 
    fontWeight:'900', 
    fontSize: 16, 
    }, 
    content: { 
    height:48, 
    flexDirection:'row', 
    backgroundColor: '#fff', 
    justifyContent:'space-around', 
    }, 
});