在 React Native 中制作具有子组件的绝对定位组件的正确方法是什么？

Question

我想创建一个看起来与Google Map相似的应用程序，其顶部还具有搜索栏。我是新手反应本地的，不确定如何实现这一目标。如果我仅使用带有position:absolute, top: 5等的文本输入，则可以将组件放在地图上。如果我将其包装到称为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}/>中添加样式prop，然后在组件定义中检索传递的样式prop并将其分配给容器视图：

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

Answer 2

我处理全屏flex-box组件顶部定位组件的一种方式是使最外面的包装器绝对放置在窗口的边缘上，为全屏flex做另一个包装器 - 框也绝对放在窗口的边缘，然后添加将位于最外层包装器上的组件。

在您的Main组件中看起来像这样：

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,
  },
})

希望有帮助！

注意：您可能需要更改一些搜索栏和映射样式才能使其正常工作。