React Native : 활성 여부에 따라 구성 요소 속성의 부울 값 변경

3 개의 버튼 구성 요소로 구성된 React Native 구성 요소가 있으며 각 구성 요소에는 inner. inner={true}버튼이 눌려진 것처럼 보이면 inner={false}버튼이 양각으로 나타납니다.

한 번에 하나의 버튼 만 활성화 될 수 있습니다. 활성 버튼이 표시 inner={true}되고 다른 두 개의 비활성 버튼이 표시 되도록 만들고 싶습니다 inner={false}.

다음은 내 코드입니다.

const ChoiceContainer = props => {
  const {children} = props;

  return <View>{children}</View>;
};

const SendTransaction = () => (
  <ChoiceContainer>
    <Text>Component 1</Text>
  </ChoiceContainer>
);

const Remove = () => (
  <ChoiceContainer>
    <Text>Component 2</Text>
  </ChoiceContainer>
);

const History = () => (
  <ChoiceContainer>
    <Text>Component 3</Text>
  </ChoiceContainer>
);

export default class MyComponent extends Component {
  state = {
    sceneType: 'add',
  };

  showSend = () => {
    this.setState({sceneType: 'add'});
  };

  showReceive = () => {
    this.setState({sceneType: 'remove'});
  };

  showHistory = () => {
    this.setState({sceneType: 'history'});
  };

  renderScene = type => {
    if (type === 'add') {
      return <SendTransaction />;
    }

    if (type === 'remove') {
      return <ReceiveTransaction />;
    }

    if (type === 'history') {
      return <TransactionHistory />;
    }
  };

  render() {
    const {sceneType} = this.state;

    return (
      <View>
        <View>
          <TouchableOpacity onPress={this.showAdd}>
            <Button inner={true}>Button 1</Button>
          <TouchableOpacity onPress={this.showRemove}>
            <Button inner={false}>Button 2</Button>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.showHistory}>
            <Button inner={false}>Button 3</Button>
          </TouchableOpacity>
        </View>
        <View>{this.renderScene(sceneType)}</View>
      </View>
    );
  }
}