ReactNative 및 NativeBase 라디오

Question

ReactNative App에서 NativeBase 템플릿을 사용하여 라디오 값을 변경하려고했습니다. 라디오를 클릭하거나 정확하게 체크 한 후 값을 얻거나 설정하고 싶습니다. 그러나 가치를 얻거나 설정하는 방법을 찾지 못했습니다. 클릭 한 후에도 라디오 버튼이 화면에서 변경되지 않았습니다. 코드는 아래와 같다 : 당신이 구성 요소가 장착 후 this.state = something를 호출 할 때, 그것은 구성 요소 수명주기의 update 방법을 트리거하지 않습니다

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