ReactNativeとNativeBase Radio

Question

ReactNative AppのNativeBaseテンプレートでラジオの値を変更しようとしました。私はそれをクリックした後、正確にチェックされているかどうか、ラジオから値を取得または設定したい。しかし、価値を得るか、設定する方法を見つけることができませんでした。クリックしてもラジオボタンが画面上で変わることはありません。コードは以下のように似ています：

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({ 
    slider = something 
}) 

を更新docs

this.setState()は非同期メソッドで参照するために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 
})