将左右图标固定到屏幕底部答案

【问题标题】：fix right left icons to the bottom of screen将左右图标固定到屏幕底部
【发布时间】：2022-11-18 12:26:22
【问题描述】：

无论文本区域的扩展如何，我都试图将角图标固定到屏幕底部。我尝试使用position=absolute and bottom = 0，但它隐藏在我的textArea 后面。

这是它现在的样子：

这就是我要的。

我只需要修复发送并将图像图标添加到屏幕的底角。请指导我如何实现这一目标。

这是我的样式表:

StyleSheet.create({
    containerStyle: {
      ...shadowStyle,
      minHeight: 72,
      width: "100%",
      paddingHorizontal: Spacing.m,
      alignItems: "flex-end",
      justifyContent: "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}
          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>

【问题讨论】：

标签： reactjs react-native flexbox stylesheet

【解决方案1】：

我会尝试添加

"flex: 1"-containerStyle

"justifyContent: 'flex-end'" - 到addImageButton 和submitButton 样式。

您可以查看示例here

【讨论】：

【解决方案2】：

只需添加

alignItems: '结束'

到 containerStyle

【讨论】：

也许 alignItems: flex-end？
是的，在这种情况下两者的工作方式相同 @talent-jsdev
不幸的是，它们都不起作用