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

如果要获取视图的高度和宽度，可以使用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
    })
  }

Answer 2

我能够通过修改checkBoxTextContainer和checkBoxContainer样式来修复它。问题是我添加了flex:1约束，我认为该约束会自动调整宽度和高度，但实际上是根据超级视图将其设置为填充，因此，如果删除该约束，它将根据内容自动进行调整。 / p>

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

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

根据React Native中的动态子组件自动调整视图

2 个答案: