Автоматическая настройка представлений на основе динамических дочерних компонентов в реагировать родной

Question

Я пытаюсь создать вид, как показано ниже,

Список флажков является динамическим и может увеличиваться или уменьшаться.На данный момент для скриншота я добавил фиксированную высоту и ширину для стиля checkboxContainer и checkBoxTextContainer.Но мне нужно то же самое, чтобы работать без указания фиксированной высоты и ширины.Ниже приведен мой текущий код.

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}
          />
        );
      }
}

Это мой 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();
  }
}

Это стили

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
  }

Сейчас он не отображает флажокраздел.Теперь вот так

Любая помощь очень ценится.Благодаря.

Answer 1

Мне удалось это исправить, изменив мой стиль checkBoxTextContainer и checkBoxContainer.Проблема заключалась в том, что я добавлял ограничение flex:1, которое, как я думал, автоматически настраивало ширину и высоту, но фактически устанавливало его для заполнения на основе суперпредставления, поэтому, если вы удалите его, оно автоматически настроится на основе содержимого.

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

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

Answer 2

Если вы хотите получить высоту и ширину вида, вы можете использовать функцию onLayout, которая будет вызываться при монтировании вида и при каждом изменении ориентации, если вы используете функцию onLayout родительского представления, вы можете получить в настоящее время отображается высота и ширина представления, которое вы можете использовать в своих стилях, вам нужно будет обновить состояние, чтобы выполнить рендеринг, с новыми высотой и шириной.

Документация для onLayout https://facebook.github.io/react-native/docs/view#onlayout

Пример кода для доступа к деталям ширины высоты из onLayout

onLayout = (e) => {
    this.setState({
      width: e.nativeEvent.layout.width,
      height: e.nativeEvent.layout.height,
      x: e.nativeEvent.layout.x,
      y: e.nativeEvent.layout.y
    })
  }