Question

我建立了像facebook这样的文字输入。键入＃后，您将获得一个包含不同主题标签的列表。我在一个网站上有两个，一个用于标题，一个用于文本。问题是，标题中的hashtag-list显示在内容文本的下方。请参阅屏幕截图： The list of hashtags is behind the lorem ipsum content

我尝试使用zIndex但它在这里没有任何效果。这个层面如下：

查看：

- 提及文字标题

--- #List for Title

- 提及文字内容

--- #List for Content

如您所见，内容低于层次中的标题。这会在屏幕上正确定位，但会在标题列表上方显示。有没有办法用顺利的解决方案来完成它？

Answer 1

尝试将blocs独立包装到视图中，不要使用绝对位置。

如果您的列表无限制地增长，则可能需要ScrollView或FlatList。

Answer 2

我找到了一个解决方案，其中包含在一个视图中包装textinput，更改顺序（首先是内容，然后是标题），然后将视图的flexDirection设置为＆＃39; column-reverse＆＃39;。这样，标题再次位于顶部，z-index现在也正确设置。只是看起来不是很好，也许有人有一个提示，以改善它。代码如下（注意MentionsTextInput包含List作为子代）：

 <View style={{flexDirection:'column-reverse'}}> //The newly added view
                        <MentionsTextInput //The content of the page
                            style={styles.inputContent}
                            placeholder={I18n.t("descriptionInput")}
                            value={this.state.description}/>

                        <MentionsTextInput //The title
                            style={styles.inputTitle}
                            placeholder={I18n.t("noteTitle")}
                            value={this.state.title}/>
 </View>

React Native - 将子视图定位在父视图的兄弟之上

2 个答案: