React Native 和 Native Base Radio

Question

我尝试使用 NativeBase 模板更改 ReactNative App 中的无线电值。单击它后，我想从收音机中获取或设置值，是否完全检查。但是找不到获取或设置它的值的方法。单击后，即使是单选按钮也不会在屏幕上改变。代码如下：

import React, { Component } from 'react';
import { TouchableOpacity, Image, View } from 'react-native';
import { connect } from 'react-redux';
import { actions } from 'react-native-navigation-redux-helpers';
import {
  Container,
  Header,
  Title,
  Content,
  Text,
  Button,
  Icon,
  InputGroup,
  Input,
  List,
  ListItem,
  Radio,  } from 'native-base';

import { openDrawer } from '../../actions/drawer';
import { Col, Row, Grid } from 'react-native-easy-grid';
import styles from './styles';
import dimension from './global';
import Swiper from 'react-native-swiper';

const imgBoy = require('../../../images/icon_boy.png');
const imgGirl = require('../../../images/icon_girl.png');
const {
  popRoute,
} = actions;

class SessionPage extends Component {

  static propTypes = {
    name: React.PropTypes.string,
    index: React.PropTypes.number,
    list: React.PropTypes.arrayOf(React.PropTypes.string),
    openDrawer: React.PropTypes.func,
    popRoute: React.PropTypes.func,
    navigation: React.PropTypes.shape({
      key: React.PropTypes.string,
    }),
  }

  popRoute() {
    this.props.popRoute(this.props.navigation.key);
  }

  constructor(props) {
    super(props);
    // console.log(this.props.navigation);
    this.state = {
      sliderCount : parseInt(this.props.navigation.behavior.length / 5) + 1,
      sliderArray : [],
      selected : false,
    }
    this.getSliderArray();
    console.log(this.state);
  }

  getSliderArray() {
    for (var i = 0; i < this.state.sliderCount; i++) {
      var childArray = [];
      for (var j = i * 5; j < 5 * (i + 1); j++) {
        if (this.props.navigation.behavior[j] != null){
          var unit = this.props.navigation.behavior[j];
          unit.selected = true;
          childArray.push(unit);
        }
      }
      this.state.sliderArray.push({
        index : i,
        behaviors : childArray
      })
    }
  }

  selectRadio(i, j){
    this.state.sliderArray[i].behaviors[j].selected = true;
  }

  render() {
    const { props: { name, index, list } } = this;

    return (
      <Container style={styles.container}>            
          <Swiper style={styles.wrapper}
            height={dimension.Height - 400}
            width={dimension.Width - 40}
            showsButtons={false}
            showsPagination={true}>
            {this.state.sliderArray.map((item, i) =>
              <View style={styles.slide1} key={i}>
                  {item.behaviors.map((subitem, j) =>
                      <ListItem key={i + "-" + j} style={styles.cardradio}>
                            <Radio selected={this.state.sliderArray[i].behaviors[j].selected} onPress={() => this.selectRadio(i, j)} />
                            <Text>{subitem.behaviorName}</Text>
                      </ListItem>

                  )}
              </View>
            )}
          </Swiper>
        </Content>
      </Container>
    );
  }
}


function bindAction(dispatch) {
  return {
    openDrawer: () => dispatch(openDrawer()),
    popRoute: key => dispatch(popRoute(key)),
  };
}

const mapStateToProps = state => ({
  navigation: state.cardNavigation,
  name: state.user.name,
  index: state.list.selectedIndex,
  list: state.list.list,
});


export default connect(mapStateToProps, bindAction)(SessionPage);

Answer 1

selectRadio(i, j){
  this.state.sliderArray[i].behaviors[j].selected = true; <== This is the problem
}

组件挂载后调用this.state = something时，不会触发组件生命周期的update方法。因此视图不会更新。

您应该使用 this.setState() 来更新您的观点

this.setState({
    slider = something
})

有关详细信息，请参阅 docs

this.setState() 是一种异步方法。在 getSliderArray() 中进行更改后，它可能不会立即反映在 console.log

中

this.getSliderArray();
console.log(this.state);

您可以将回调传递给 this.setState() 以仅在状态更改后执行任何操作

this.setState({
   // new values
}, function() {
   // Will be called only after switching to new state 
})

React Native 和 Native Base Radio

ReactNative and NativeBase Radio

react-native

native-base