Question

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

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

这是一个名为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小部件作为背景，可能在地图上有一个叠加层。

请帮我一把。首先感谢所有的善意。

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

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

1 个答案: