单选按钮在Native-Base中不起作用

Question

我正在使用Native-Base.我需要使用单选按钮,但它们不起作用.当你点击没有任何反应.这是代码.

import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class RadioButtonExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <ListItem>
            <Text>Daily Stand Up</Text>
            <Right>
              <Radio selected={false} />
            </Right>
          </ListItem>
          <ListItem>
            <Text>Discussion with Client</Text>
            <Right>
              <Radio selected={true} />
            </Right>
          </ListItem>
        </Content>
      </Container>
    );
  }
}

我怎样才能使它工作？请不要发送仅包含单选按钮功能的不同库.我已经检查了不同的单选按钮库.只需要在此代码中添加一些内容即可使其正常工作.

Answer 1

你可以添加onPress替换TouchableOpacity它将接受它的道具.

import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class RadioButtonExample extends Component {
constructor() {
  super();
  this.state = {
   itemSelected: 'itemOne',
 }
}
render() {
 return (
    <Container>
      <Header />
      <Content>
        <ListItem>
          <Text>Daily Stand Up</Text>
          <Right>
            <Radio onPress={() => this.setState({ itemSelected: 'itemOne' })}
              selected={this.state.itemSelected == 'itemOne'}
            />
          </Right>
        </ListItem>
        <ListItem>
          <Text>Discussion with Client</Text>
          <Right>
            <Radio onPress={() => this.setState({ itemSelected: 'itemTwo' })}
                  selected={this.state.itemSelected == 'itemTwo' }
                />
          </Right>
        </ListItem>
      </Content>
    </Container>
   );
  }
}

Answer 2

最简单的方法是，首先创建一个广播项目数组。

const radioItem = [
    { label: 'Female', value: 'female' },
    { label: 'Male', value: 'male' }
];

然后在您的内容中像这样做。

<Content>
   <Text>Select your choice</Text>
   {
     radioItem.map((data, key) => {
         return (
                  <ListItem key={key}>

                     <Left>
                         <Text>{data.label}</Text>
                     </Left>
                     <Right>
                         <Radio
                            onPress={()=> this.setState({radioValue:data.value})}
                            color={"gray"}
                            selectedColor={"gray"}
                            selected={data.value === this.state.radioValue}
                          />
                     </Right>
                  </ListItem>
                 )
       })
   }
</Content>

让我们了解一下：

首先，您需要了解本机基础的Radio组件，它使用选定的道具检查布尔值true或false，并因此显示活动的radio。

因此，我们使用onPress动作来获取当前值，并将其存储到状态中，并且所选的props匹配该值并返回true或false。因此，我们可以默认看到对于两个单选项目，我们的值都为false，因为我们没有状态值。

您还可以通过在构造函数中定义状态值来设置默认选择的单选