React Native alignItems =“flex-end”不适用于onContentSizeChange

8ehkhllq  于 2022-11-25  发布在  React
关注(0)|答案(2)|浏览(111)

我试图将角落图标固定在屏幕底部,而不考虑文本区域的扩展。我尝试使用position=absolute and bottom = 0,但它被隐藏在我的textArea后面。
此外,alignItems = "flex-end"仅在删除onContentSizeChange={(e) => setHeight(e.nativeEvent.contentSize.height)}时才起作用
下面是它现在的样子:

"这就是我想要的"

我只需要修复发送和添加图像图标到屏幕的底部角落。请指导我如何才能实现这一点。

    • 这里是我的样式表**:
StyleSheet.create({
    containerStyle: {
      ...shadowStyle,
      minHeight: 72,
      width: "100%",
      paddingHorizontal: Spacing.m,
      alignItems: "flex-end",
      flexDirection: "row",
      padding: 10,
      borderTopLeftRadius: Spacing.s,
      borderTopRightRadius: Spacing.s,
      backgroundColor: colors.gray10,
    },
    textImageWrapper: {
      width: "79%",
      borderRadius: Radius.s,
      backgroundColor: colors.white,
    },
    inputStyleShort: {
      ...Typography.callout,
      flexWrap: "wrap",
      minHeight: 40,
      paddingLeft: Spacing.m,
      borderRadius: Radius.s,
      backgroundColor: colors.white,
    },
    inputStyle: {
      ...Typography.callout,
      flexWrap: "wrap",
      height: 40,
      borderRadius: Radius.s,
      paddingLeft: Spacing.m,
      paddingTop: 11,
    },
    submitButton: {
      backgroundColor: colors.green25,
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "center",
      marginLeft: Spacing.s,
      width: 40,
      height: 40,
      borderRadius: Radius.s,
    },
    addImageButton: {
      width: "8%",
      height: Spacing.l,
      flexDirection: "row",
      alignItems: "center",
    },
    • 以下是我的设计代码**:
const calculateImageContainer = selectedImage.length ? { height: 280 } : { alignItems: "center" };
  return (
    <View style={[getStyle.containerStyle, calculateImageContainer]}>
      <TouchableOpacity
        style={getStyle.addImageButton}
        onPress={() => setImageSelectionVisible(true)}
      >
        {renderSvgIcon("addPicture", colors.gray90, null, null)}
      </TouchableOpacity>
      <View style={getStyle.textImageWrapper}>
        <TextInput
          ref={inputRef}
          value={inputValue}
          style={
            inputValue.length ? [getStyle.inputStyleShort, { height: height }] : getStyle.inputStyle
          }
          placeholder={placeholder || i18n.t("community.writeComment")}
          placeholderTextColor="gray"
          multiline={true}
          textAlignVertical="top"
          onChangeText={onChange}
          maxLength={maxLength || 500}
          onLayout={(event) => {
           if (height === 0) {
             setHeight(event.nativeEvent.layout.height);
           }
         }}
        onContentSizeChange={(e) => 
         setHeight(e.nativeEvent.contentSize.height)}
        />
        {selectedImage?.length ? (
          <ImagesLayout
            path="AvyCommentLinearInput"
            images={selectedImage}
            handleRemoveImagePress={removeImage}
          />
        ) : null}
      </View>
      <TouchableOpacity onPress={onPressSubmit} style={getStyle.submitButton}>
        {renderSvgIcon("message_send_icon", colors.white, IconSize.m, IconSize.m)}
      </TouchableOpacity>
      
    </View>
lp0sw83n

lp0sw83n1#

我想补充一点
"flex: 1"-至containerStyle
"justifyContent: 'flex-end'"-变更为addImageButtonsubmitButton型式。
您可以查看示例here

f1tvaqid

f1tvaqid2#

简单地添加了
alignItems:'结束'
到容器样式

相关问题