1

我尝试使用 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);
4

1 回答 1

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

有关更多信息，请参阅文档

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 
})
于 2017-02-28T19:36:27.210 回答