Question

我一直在尝试找到创建动态单选按钮的教程或说明，但是找不到一个好的单选按钮。选择一个按钮后，我想用它来更改视图。

如果有人使用过它，或者知道教程或链接，请告诉我如何做。对我来说将是很大的帮助。

谢谢

import React, { Component } from 'react';
import {
Platform,StyleSheet,Text,View,Button ,Alert} from 'react-native';
import RadioButton from 'radio-button-react-native';
export default class Taxi extends React.Component {


constructor (props){
super(props)
  this.state = {
        value: 0
    }

    }

handleOnPress(value){
this.setState({value:value})
}
render() {
  return (
    <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
      <Text> Ici c'est le taxi!</Text>

       <Text style = {{ color : "lightblue"}}> Nombre de places requises </Text>
       <RadioButton currentValue={this.state.value} value={0} onPress={this.handleOnPress.bind(this)}>
            <Text> 1 </Text>
             </RadioButton>

             <RadioButton currentValue={this.state.value} value={1} onPress={this.handleOnPress.bind(this)}>
             <Text> 2 </Text>
             </RadioButton>

             <RadioButton currentValue={this.state.value} value={2} onPress={this.handleOnPress.bind(this)}>
             <Text> 3 </Text>
             </RadioButton>

             <RadioButton currentValue={this.state.value} value= {3} onPress={this.handleOnPress.bind(this)}>
             <Text> 4 </Text>
             </RadioButton>

             <RadioButton currentValue={this.state.value} value={4} onPress={this.handleOnPress.bind(this)}>
             <Text> 5 </Text>
             </RadioButton>

      <Button style = {styles.buttonStyle} title = 'Request' onPress = {() => {}}/>

    </View> 
  );
}

}

  const styles = StyleSheet.create({
  buttonStyle :{
     color :"blue",
     paddingTop : 80,
     paddingRight :10,

  },
  textStyle: {
    paddingTop : 30 ,
    paddingRight :10,

  }

}）

Answer 1

//使用此命令安装

npm i react-native-simple-radio-button --save

//在导入部分中添加

import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';

///“导入后”添加此变量

var radio_props = [
  {label: 'param1', value: 0 },
  {label: 'param2', value: 1 }
];

export default class RadioButton extends Component { 

this.state = {value: ""}

//将此代码添加到渲染功能中

render() {
    return (
      <View>
        <RadioForm
          radio_props={radio_props}
          initial={0}
          onPress={(value) => {this.setState({value:value})}}
        />
      </View>
    );
  }
});
}

如何在react-native中创建动态单选按钮

1 个答案: