如何在动态列表中使用Checkbox React Native?

时间:2017-09-29 17:38:10

标签: javascript react-native

我正在使用react native List来使用自定义数据数组和ListItem生成动态列表。我在每个列表项中使用嵌套复选框,我无法设置开关。我通过设置状态数组来尝试它但它似乎不起作用。 这是我的清单

const DashboardList = props => (
  <List
    style={props.ListStyle}
    dataArray={props.ListData}
    renderRow={item => <ListContent ListData={item} />}
  />
);

这是我的listItem

 class ListContent extends Component {
  static navigationOptions = {
    title: "ListContent",
    header: null
  };
  constructor(props) {
    super(props);
    this.state = {
      IsContentVisible: false
    };
  }
  render() {
    return (<ListItem>
    <View>
      <View>
        <Left>
          <View>
            <CheckBox
              checked={this.state.checked}
              onPress={checked => {
                this.setState({ checked: !this.state.checked });
                this.props.CheckBoxChange(this.props.ListItem, 
                checked);}}/>
          </View>
          <View>
            <Image
              source={this.props.ListItem.DataFolderContent[0].Image}
              resizeMethod="auto"
              resizeMode="contain"
            />
          </View>
          <View>
            <Text>
              {this.props.ListItem.Name}
            </Text>
          </View>
        </Left>
        <Body>
          <View>
            <Badge style={{ backgroundColor: "#eeae30" }}>
              <Text>{this.props.ListItem.DataFolderContent.length}
          </Text>
            </Badge>
          </View>
        </Body>
        <Right >
          <Switch
            onTintColor="#eeae30"
            value={this.state.switched}
            onValueChange={() => {
              this.setState({ switched: !this.state.switched });
              this.props.SwitchToggled(this.props.ListItem);
            }}
          />
        </Right>
      </View>
    </View>
  </ListItem>;
  }
}

0 个答案:

没有答案