react-native - Auto adjusting views based on dynamic child components in react native

Question

I'm trying to create a view like below,

The checkbox list is dynamic and may increase or decrease. At the moment for the purpose of the screenshot I've added fixed height and width for both my checkboxContainer and checkBoxTextContainer style. But I need the same to work without specifying fixed height and width. Below is my current code.

render() {
    return(
        <ScrollView
            style={{flex:1}}>
<KeyboardAwareScrollView
        contentContainerStyle={styles.imageContainer}
        resetScrollToCoords={{ x: 0, y: 0 }}
        scrollEnabled={true}
        keyboardShouldPersistTaps="handled"
      >
<View style={styles.dynamicData}>{this.renderData()}</View>
</KeyboardAwareScrollView>
</ScrollView>
    );
}



renderData(){
    //some other code to display other fields
    if (item === "-checkBox-") {
        return (
          <CheckBoxInput
            checkBoxContainerStyle={styles.checkBoxContainer}
            checkBoxTextContainerStyle={styles.checkBoxTextContainer}
            checkboxStyle={styles.checkBoxStyle}
            rightTextMarginStyle={styles.rightTextMargin}
            questionTextStyle={styles.questionText}
            checkBoxes={this.getDropDownValue(i)}
            checkBoxCheckedImage={Images.checkBoxTick}
            checkBoxUnCheckedImage={Images.checkBoxEmpty}
            updateDropDown={this.onOptionChanged}
            index={i}
            key={index}
          />
        );
      }
}

This is my CheckBoxInputComponent

export default class CheckBoxInput extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  //Handle checkbox change
  handleCheckBoxChange = event => {
    console.log("Selected Checkbox = " + event.value);
    this.props.updateDropDown(this.props.index, event.value, "checkBox");
  };

  //Renders checkbox view
  renderCheckBoxView() {
    let checkBoxComponentList = [];
    for (let i = 0; i < this.props.checkBoxes.length; i++) {
      checkBoxComponentList.push(
        <View
          style={this.props.checkBoxTextContainerStyle}
          key={this.props.checkBoxes[i].id}
        >
          <CheckBox
            style={this.props.checkboxStyle}
            onClick={this.handleCheckBoxChange.bind(
              this,
              this.props.checkBoxes[i]
            )}
            isChecked={this.props.checkBoxes[i].isChecked}
            checkedImage={<Image source={this.props.checkBoxCheckedImage} />}
            unCheckedImage={
              <Image source={this.props.checkBoxUnCheckedImage} />
            }
          />
          <View style={this.props.rightTextMarginStyle} />
          <Text style={this.props.questionTextStyle} numberOfLines={1}>
            {this.props.checkBoxes[i].value}
          </Text>
        </View>
      );
    }
    return (
      <View style={this.props.checkBoxContainerStyle}>
        {checkBoxComponentList}
      </View>
    );
  }

  render() {
    return this.renderCheckBoxView();
  }
}

These are the styles

dynamicData: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center"
  },

checkBoxTextContainer: {
    // width:150
    flex: 1,
    height: 45,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  rightTextMargin: {
    width: 15,
    height: 45
  },
  checkBoxContainer: {
    // width: "100%",
    // height: 200,
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap"
  },
  checkBoxStyle: {
    width: 20,
    height: 20
  },
 imageContainer: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "flex-start"
  },
  questionText: {
    color: "black",
    textAlign: "left",
    fontSize: 16,
    fontFamily: "SegoeUI-Semibold",
    lineHeight: 30
  }

Right now it doesn't display the checkbox section. Its now like this

Any help is really appreciated. Thanks.

标签： react-nativedynamicflexboxreact-native-androidreact-native-ios

Answer 1

我可以通过修改我的 checkBoxTextContainer 和 checkBoxContainer 样式来修复它。问题是我添加flex:1了我认为会自动调整宽度和高度的约束，但它实际上将它设置为根据超级视图填充，所以如果你删除它，它会根据内容自动调整。

checkBoxTextContainer: {
    height: 45,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },

checkBoxContainer: {
    flexDirection: "row",
    flexWrap: "wrap"
  }