React Native 将左右图标固定到屏幕底部

0s7z1bwu  于 2022-11-17  发布在  React
关注(0)|答案(2)|浏览(241)

我试图将角落图标固定在屏幕底部,而不考虑文本区域的扩展。我尝试使用position=absolute and bottom = 0,但它被隐藏在我的textArea后面。
下面是它现在的样子:

"这就是我想要的"

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

这里是我的样式表

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

cngwdvgl1#

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

0x6upsns

0x6upsns2#

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

相关问题