ネイティブに反応します - 親ビューの兄弟の上に子ビューを配置

Question

私はFacebookの言及のようなテキスト入力を作成します。 ＃を入力すると、異なるハッシュタグを持つリストが得られます。私は1つのサイトにタイトルとテキストの2つを持っています。 問題は、タイトルのハッシュタグリストがコンテンツのテキストの下に表示されることです。 Screenshot for： The list of hashtags is behind the lorem ipsum content

私はzIndexを使ってみましたが、ここでは何の効果もありません。次のように hierachieは次のとおりです。

ビュー：

- MentionsTextタイトル

--- #Listタイトル

用 - MentionsTextコンテンツ

--- #List用コンテンツ

ご覧のとおり、コンテンツは階層内のタイトルの下にあります。それは画面に正しく配置されますが、タイトルのリストの上に表示されます。滑らかなソリューションでそれを達成する方法はありますか？

Answer 1

私は、両方のテキスト入力を1つのビューにラップし、順序を変更してから（コンテンツを最初に、次にタイトル）、ビューのflexDirectionを 'column-reverse'に設定するソリューションを見つけました。そうすることで、タイトルが再び上になり、z-indexも正しく設定されます。ちょっとdoesntがとてもいいように見える、多分誰かがそれを改善するためのヒントを得た。コードは次のとおりです（MentionsTextInputには子としてリストが含まれています）。

<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> 

Answer 2

ブロックをビューに独立してラッピングしてください。絶対位置は使用しないでください。

Btwあなたのリストが無制限に拡大できる場合は、ScrollViewまたはFlatListが必要な場合があります。