单选按钮在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>

让我们来理解一下：

首先，你需要了解原生基础的无线电组件，它使用选定的道具来检查布尔值，真或假，并相应地显示活动无线电。

因此，我们使用onPress操作来获取当前值，并将其存储到状态中，我们选择的属性匹配该值并返回true或false。因此我们可以看到，默认情况下，我们的值对于这两个单选项都是false，因为我们没有state值。

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

Answer 3

ListItem节点上必须有onPress属性。我通过这样做设法让它工作：

                <ListItem
                    selected={this.state.registerForm.type == 'item1'}
                    onPress={() => this._handleRegisterFormChanges('item1', 'type')}
                >
                    <Left>
                        <View style={{ flexDirection: 'column' }}>
                            <Text style={{ alignSelf: 'flex-start' }}>Radio text 1</Text>
                        </View>
                    </Left>
                    <Right>
                        <Radio
                            selected={this.state.registerForm.type == 'item1'}
                            color={Colors.tintColor}
                            selectedColor={Colors.tintColor}
                        />
                    </Right>
                </ListItem>
                <ListItem
                    selected={this.state.registerForm.type == 'item2'}
                    onPress={() => this._handleRegisterFormChanges('item2', 'type')}
                >
                    <Left>
                        <View >
                            <Text style={{ alignSelf: 'flex-start' }}>Radio text 2</Text>
                        </View>
                    </Left>
                    <Right>
                        <Radio
                            selected={this.state.registerForm.type == 'item2'}
                            color={Colors.tintColor}
                            selectedColor={Colors.tintColor}
                        />
                    </Right>
                </ListItem>