ボタンを押したときに元のアクティブなアクティブなクラスに反応します

Question

ネイティブプロジェクトのiOSアプリケーションに反応するボタンが3つあります。クラスをアクティブにしてクリックされたボタンにする方法と、このクラスを他のクラスから削除する方法はありますか？ jQueryで使用したaddClass/removeClassと同じですか？

Answer 1

まず、あなたのスタイルを「クラス」に定義してください。

const styles = StyleSheet.create({ 
    btnSelected: { 
    ... 
    }, 
    notSelected : { 
    } 
}); 

あなたの反応コンポーネントでは、stateプロパティを使用できます。

例：

state = { 
    btnSelected: 1 
} 

<Button 
    style={(this.state.btnSelected== 1)?styles.btnSelected:styles.notSelected} 
    onPress={() => this.setState({ btnSelected: 1 })} ... /> 
<Button 
    style={(this.state.btnSelected== 2)?styles.btnSelected:styles.notSelected} ... 
    onPress={() => this.setState({ btnSelected: 2 })} .../> 
<Button 
    style={(this.state.btnSelected== 3)?styles.btnSelected:styles.notSelected} 
    onPress={() => this.setState({ btnSelected: 3 })} ... /> 

Answer 2

React and React Nativeのキーコンセプトは、UIの状態を強制的に設定しないということです。代わりに、いくつかの状態を変更し、それに基づいてUIを宣言的にレンダリングします。

class Buttons extends React.Component { 
    state = { 
     activeButton: 'first' 
    } 

    render() { 
     return (
     <View> 
      <Button 
      onPress={() => this.setState({ activeButton: 'first' })} 
      isActive={this.state.activeButton === 'first'} 
      /> 
      <Button 
      onPress={() => this.setState({ activeButton: 'second' })} 
      isActive={this.state.activeButton === 'second'} 
      /> 
      <Button 
      onPress={() => this.setState({ activeButton: 'third' })} 
      isActive={this.state.activeButton === 'third'} 
      /> 
     </View> 
    ) 
    } 
    } 

onPressイベントハンドラはすぐに再レンダリングするコンポーネントを起こしsetState、と地元のコンポーネントの状態を設定します。

あなたは、たとえばローカルコンポーネントの状態（this.state）を使用することができます。 isActiveプロパティは、this.state.activeButtonと何らかの値を比較する式に基づいて、すべてのボタンに設定されます。