我试图将角落图标固定在屏幕底部,而不考虑文本区域的扩展。我尝试使用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>
2条答案
按热度按时间lp0sw83n1#
我想补充一点
"flex: 1"
-至containerStyle
"justifyContent: 'flex-end'"
-变更为addImageButton
和submitButton
型式。您可以查看示例here
f1tvaqid2#
简单地添加了
alignItems:'结束'
到容器样式