基于单选按钮选择显示不同的视图页面

Question

<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",
      },
    ];

嗨，我是编程新手，我想知道如何根据单选按钮的选择更改视图组件。例如，如果用户选择增肌，它会显示视图组件说“你想每周增肌多少？”如果用户选择减脂，它会显示一个视图组件，上面写着“你想减掉多少？”

Answer 1

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

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>
  );

对于class组件

  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>
  );
  }

您可以为所选目标使用 ID

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

基于单选按钮选择显示不同的视图页面

based on radio button selection show a different View page

javascript

radio-group

radio-button

reactjs

react-native