如何像 React-Native 布局中的 FrameLayout 一样设置正确的布局参数？答案

【问题标题】：How to set a correct layout param just like FrameLayout in React-Native layout?如何像 React-Native 布局中的 FrameLayout 一样设置正确的布局参数？
【发布时间】：2017-09-22 03:05:15
【问题描述】：

我想做的是创建一个框架布局，就像 android 的 FrameLayout 一样，我已经失败了好几次。这就是我在这里的原因。

预期场景： 1：在底层创建地图视图。（原生组件） 2：在地图视图上显示标记。（本机组件如上） 3：在顶部框架上放置一个搜索小部件。（React 组件）

这是一个 react-native 页面中的布局，名为 page.js：

<MapLayout>
    <TextInput style={ marginTop: 20, borderRadius: 5, padding: 5, marginLeft: 16, marginRight: 16, width:100, height: 100 ,backgroundColor:'red'}} placeholder='search'></TextInput>
</MapLayout>

注意：MapLayout是android的原生组件，继承自FrameLayout，可以导出到React-Native。底层有一个 MapView 小部件作为背景，可能在地图上有叠加层。

请帮我一把。先谢谢大家的好意。

【问题讨论】：

标签： android react-native android-mapview android-framelayout

【解决方案1】：

您可以使用这种方式进行框架布局

import React, { Component } from "react";
import { Animated, View, StyleSheet, Easing, Text } from "react-native";



class A extends Component {
  constructor(props) {
    super(props);
    this.animatedValue = new Animated.Value(0);
  }

  handleAnimation = () => {
    Animated.timing(this.animatedValue, {
      toValue: 1,
      duration: 500,
      easing: Easing.ease
    }).start();
  };

  render() {
    return (
      <View style={styles.container}>

        <View style={styles.layer1} />
        <View style={styles.overLay}>
          <Text>This is an overlay area</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  layer1: {
    height:100,
    backgroundColor: "lightgreen",

  },
  overLay: {
    height: 100,
    width: "100%",
    backgroundColor: "#00000070",
    position: "absolute",

  }
});

export default A;

【讨论】：