React Nativeに子を持つ絶対配置コンポーネントを作成する正しい方法は何ですか？

Question

トップに検索バーがあるように、Googleマップに似たアプリを作成したいと思います。 私はReact Nativeを初めて使っていますが、これを達成する方法がわかりません。 position:absolute, top: 5などでTextInputだけを使用すると、それが動作し、コンポーネントがマップに配置されます。 これをSearchBarというカスタムコンポーネントにラップすると、マップの/の下にある画面の一番下に移動します。私は目標をSearchBarのカスタムコンポーネントに持っているので、それをラップする必要がありますTextInputとButtonがあります。

検索バー：

class SearchBar extends Component { 
    render() { 
    return (
     <View style={styles2.container}> 
     <TextInput 
      style={styles2.input} 
      placeholder="Enter your start point" 
      onChangeText={text => console.log({text})} 
     /> 
     <Button style={styles2.button} title="+" onPress={() => undefined} /> 
     </View> 
    ) 
    } 
} 

const styles2 = StyleSheet.create({ 
    container: { 
    flexDirection: 'row', 
    backgroundColor: 'white', 
    }, 
    input: { 
    flex: 1, 
    }, 
    button: { 
    width: 50, 
    height: 50, 
    borderRadius: 25, 
    backgroundColor: 'blue', 
    }, 
}) 

メインビュー：

class Main extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Map style={styles.map} /> 
     <SearchBar/> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'stretch', 
    backgroundColor: 'transparent', 
    }, 
    searchBar: { 
    position: 'absolute', 
    left: 10, 
    top: 10, 
    right: 10, 
    height: 50, 
    zIndex: 1, 
    backgroundColor: 'white', 
    }, 
    map: { 
    flex: 1, 
    }, 
}) 

Answer 1

ちょうどあなたにカスタムコンポーネント<SearchBar style={styles.searchBar}/>をスタイルの小道具を追加し、コンポーネント定義に渡されたスタイルの小道具を取得し、コンテナに割り当てこのように表示：

class SearchBar extends Component { 
    render() { 
    return (
     <View style={[styles2.container,this.props.style]}> 
      . 
      . 
      . 
     </View> 
    ); 
    } 
} 

Answer 2

私はポジションフルスクリーンフレックスボックスコンポーネントの上部にあるgコンポーネントは、最も外側のラッパーをウインドウのエッジに絶対的に配置すること、ウインドウのエッジに完全に位置するフルスクリーンフレックスボックス用の別のラッパーを作成すること、最も外側のラッパーに配置されるコンポーネントを追加します。

class Main extends Component { 
    render() { 
    return (
     <View style={styles.edges}> 
     <View style={styles.edges}> 
      <Map style={styles.map} /> 
     </View> 
     <SearchBar/> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    edges: { 
    bottom: 0, 
    left: 0 
    position: absolute, 
    right: 0, 
    top: 0 
    } 
    searchBar: { 
    position: 'absolute', 
    left: 10, 
    top: 10, 
    right: 10, 
    height: 50, 
    zIndex: 1, 
    backgroundColor: 'white', 
    }, 
    map: { 
    flex: 1, 
    }, 
}) 

希望に役立ちます。このようになりますあなたのMainコンポーネントで

！

注：検索バーとマップスタイルの一部を変更して、正しく動作させる必要がある場合があります。