Javascript 根据单选按钮选择显示不同的查看页面 console.log（e）} /> 你希望每周赚多少钱？ console.log（e）} /> 常数目标=[ { 标签：“肌肉增加”， }, { 标签：“减肥”， }, { 标签：“维护”， }, ]; 常量详细信息=[ { 标签：“每周1磅”， }, { 标签：“每周0.5磅”， }, { 标签：“每周0.25磅”， }, ];

您好，我是编程新手，我想知道如何根据单选按钮的选择更改视图组件。例如，如果用户选择肌肉增加，它将显示视图组件，显示“您每周希望增加多少？”如果用户选择脂肪减少，它将显示视图组件，显示“您希望减少多少？”

您可以使用功能组件的类似状态来管理此问题

<RadioButtonRN
            boxStyle={{
              height: hp("6%"),
              width: wp("80%"),
            }}
            activeColor="white"
            boxActiveBgColor="red"
            textColor="black"
            textStyle={{ fontWeight: "bold" }}
            data={goal}
            selectedBtn={(e) => console.log(e)}
          />

<View style={{ alignItems: "center" }}>
              <Text style={{ color: "red", fontSize: 15, top: hp("5%") }}>
                How much would you like to gain per week?
              </Text>
              <RadioButtonRN
                style={{ top: hp("10%") }}
                boxStyle={{
                  height: hp("6%"),
                  width: wp("80%"),
                }}
                activeColor="white"
                boxActiveBgColor="red"
                textColor="black"
                textStyle={{ fontWeight: "bold" }}
                data={details}
                selectedBtn={(e) => console.log(e)}
              />
            </View>



const goal = [
      {
        label: "Muscle Gain",
      },
      {
        label: "Fat Loss",
      },
      {
        label: "Maintaining",
      },
    ];

    const details = [
      {
        label: "1 pound per week",
      },
      {
        label: "0.5 pounds per week",
      },
      {
        label: "0.25 pounds per week",
      },
    ];

const [selectedGoal,setSelctedGoal] = React.useState(1)

  return (
    <View style={styles.container}>
      <RadioButtonRN
            boxStyle={{
              height:  "6%" ,
              width: "80%" ,
            }}
            activeColor="white"
            boxActiveBgColor="red"
            textColor="black"
            textStyle={{ fontWeight: "bold" }}
            data={goal}
            initial={selectedGoal}
            selectedBtn={(e) => setSelctedGoal(e.id)} //set Selected id
          />
           <Text style={{ color: "red", fontSize: 15, top:  "5%"  }}>
                How much would you like to {selectedGoal == 1 ? 'Gain' : selectedGoal== 2 ? 'Lose':'Maintain'} per week?
              </Text>
    </View>
  );

  constructor(props) {
        super(props);
        this.state = { selectedGoal: 1 };
    }

  render(){
    const {selectedGoal} = this.state
    return (
     <View style={styles.container}>
      <RadioButtonRN
            boxStyle={{
              height:  "6%" ,
              width: "80%" ,
            }}
            activeColor="white" 
            boxActiveBgColor="red"
            textColor="black"
            textStyle={{ fontWeight: "bold" }}
            data={goal}
            initial={selectedGoal}
            selectedBtn={(e) => {this.setState({selectedGoal:e.id})}} //set Selected id
          />
           <Text style={{ color: "red", fontSize: 15, top:  "5%"  }}>
                How much would you like to {selectedGoal == 1 ? 'Gain' : selectedGoal== 2 ? 'Lose':'Maintain'} per week?
              </Text>
    </View>
  );
  }

const goal = [
      {
        label: "Muscle Gain",
        id:1
      },
      {
        label: "Fat Loss",
         id:2
      },
      {
        label: "Maintaining",
         id:3
      },
    ];