基于反应本机中的动态子组件自动调整视图

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 约束，我认为它会自动调整宽度和高度，但它实际上将其设置为基于超级视图进行填充，因此如果您删除它，它将根据内容自动调整。

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

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

基于反应本机中的动态子组件自动调整视图

Auto adjusting views based on dynamic child components in react native

dynamic

flexbox

react-native

react-native-android

react-native-ios