Пользовательская кнопка-переключатель React Native

Question

Привет, так что я новичок, чтобы отреагировать на нативный и javascript, и в настоящее время я учусь делать пользовательские переключатели с изображениями, это выглядит так: мой пользовательский переключатель на этой странице пользователь собираетсявыберите одну кнопку из списка, и я хочу сделать это, когда страница отображается впервые, она покажет одну нажатую кнопку, и пользователь может выбрать только одну кнопку. Может кто-нибудь сказать мне, как это выяснить? Заранее спасибо

вот мои коды

RadioButton.js

export default class RadioButton extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selected: this.props.currentSelection === this.props.value,
        }
    }

    button() {
        var imgSource = this.state.selected? this.props.normalImg : this.props.selectedImg;
        return (
          <Image
            source={ imgSource }
          />
        );
      }

      render() {
        let activeButton = this.props.activeStyle ? this.props.activeStyle : styles.activeButton;

        return (
            <View style={[styles.container, this.props.containerStyle, this.state.selected || this.props.normalImg ? activeButton : inactiveButton]}>
                <TouchableOpacity onPress={() => {
                    this.setState({ selected: !this.state.selected });
                    
                }}>
                    {
                       this.button()
                    }
                </TouchableOpacity>
            </View>

        );
    }
}

ActivityLog.js

class ActivityLog extends Component {
    constructor(props){
        super(props); 
    }
    
    render() {
      return (
        <View style={styles.innerContainer}>
                    <Text style={styles.dialogText}>{`Log my activity at ${time} as...`}</Text>
                        <View style={styles.buttonContainer}>
                            <RadioButton selectedImg={img.activity.breakA} normalImg={img.activity.break} containerStyle={{marginHorizontal: normalize(10)}}/>
                            <RadioButton selectedImg={img.activity.meetingA} normalImg={img.activity.meeting} containerStyle={{marginHorizontal: normalize(10)}}/>
                        </View>

                        <View style={styles.buttonContainer}>
                            <RadioButton selectedImg={img.activity.otwA} normalImg={img.activity.otw} containerStyle={{marginHorizontal: normalize(10)}}/>
                            <RadioButton selectedImg={img.activity.officeA} normalImg={img.activity.office} containerStyle={{marginHorizontal: normalize(10)}}/>
                        </View>
      );
    }
    
 }

Answer 1

Извлеките activeStatus в ActivityLog, чтобы отследить, какая кнопка выбрана, сейчас вы поддерживаете состояние для каждой кнопки как локальное состояние. Поэтому трудно узнать другие компоненты, чтобы узнать об активном состоянии кнопки.

Вот общая реализация для грубой идеи.

const Child=(props)=>{
    <TouchableOpacity onPress={props.handlePress}>
        <Text style={[baseStyle,active && activeStyle]}>{props.title}</Text>
    </TouchableOpacity>
}
class Parent extends React.Component{
 state={
  selectedChild:''
 }
 changeSelection=(sometitle)=>{
  this.setState({
      selectedChild:sometitle
  })
 }
 render(){
     return(
         <View>
             <Child handlePress={()=>this.changeSelection('1')} active={this.state.selectedChild==='1'}/>
             <Child handlePress={()=>this.changeSelection('2')} active={this.state.selectedChild==='2'}/>
             <Child handlePress={()=>this.changeSelection('3')} active={this.state.selectedChild==='3'}/>
             <Child handlePress={()=>this.changeSelection('4')} active={this.state.selectedChild==='4'}/>
         </View>
     )
 }
}

Экспо демо Ссылка