ReactNative et NativeBase Radio

Question

J'ai essayé de changer la valeur radio dans ReactNative App avec le modèle NativeBase. Je veux obtenir ou définir la valeur de la radio après le clic, exactement vérifié ou non. Mais n'a pas pu trouver un moyen d'obtenir ou de définir de la valeur. Même le bouton radio n'a jamais changé sur l'écran après un clic. Les codes sont comme ci-dessous:

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 
} 

Lorsque vous appelez this.state = something après que le composant a monté, il ne déclenche pas la méthode update du cycle de vie des composants. Par conséquent, la vue ne sera pas mise à jour.

Vous devez utiliser this.setState() mettre à jour vos vues

this.setState({ 
    slider = something 
}) 

Pour plus d'informations, reportez-vous docs

this.setState() est une méthode async. Une fois que vous apportez des modifications dans getSliderArray(), il peut ne pas être immédiatement reflétée dans console.log

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

Vous pouvez passer rappel à this.setState() pour effectuer une action seulement après l'état est changé

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