Question

我想把我的头缠在flexbox上，以及组件树如何与react-native-maps MapView一起工作（以及这是否与其他组件“位于它们之上”的其他组件不同）当前正在使用Callout。

例如，这是我的MapView的render方法。 TouchableOpacity区域（及其buttonCallout容器。目前仅用于我了解布局的实验。我使用的是makeitopen.com的F8StyleSheet包装器


  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={{ flex: 1 }}
          region={this.state.region}
          showsUserLocation={true}
        >
          {this.renderMarkers()}
        </MapView>
        <Callout style={styles.searchCallout}>
          <TextInput
            onChangeText={searchText => this.setState({ searchText })}
            onSubmitEditing={this.handleSearch.bind(this)}
            style={styles.calloutSearch}
            placeholder={"Search"}
            value={this.state.searchText}
          />
        </Callout>
        <Callout style={styles.buttonCallout}>
          <TouchableOpacity
            style={[styles.touchable]}
            onPress={() => console.log("press")}
          >
            <Text style={styles.touchableText}>Press Me 1</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.touchable]}
            onPress={() => console.log("press")}
          >
            <Text style={styles.touchableText}>Press Me 2</Text>
          </TouchableOpacity>
        </Callout>
      </View>
    );
  }
}

const styles = F8StyleSheet.create({
  container: {
    flex: 1
  },
  buttonCallout: {
    flex: 1,
    alignSelf: "flex-end",
    justifyContent: "space-between",
    backgroundColor: "transparent",
    borderWidth: 0.5,
    ios: { padding: 5 },
    borderRadius: 20
  },
  touchable: {
    backgroundColor: "lightblue",
    padding: 10,
    margin: 10
  },
  touchableText: {
    fontSize: 24
  },
  searchCallout: {
    flexDirection: "row",
    backgroundColor: "rgba(255, 255, 255, 0.9)",
    borderRadius: 10,
    width: "80%",
    marginLeft: "5%",
    marginTop: 40
  },
  calloutSearch: {
    borderColor: "transparent",
    marginLeft: 10,
    width: "90%",
    marginRight: 10,
    height: 40,
    borderWidth: 0.0
  }
});

我知道如何使用边距使searchCallout达到我想要的位置，因为它位于顶部。

就像现在的代码一样，buttonCallout（内部带有TouchableOpacity）呈现在右上角（明智的-alignSelf: 'flex-end'放在右边的“末端” ）。

...

后期更新！通过将styles.container的{{1}}的{{1}}更改为flexDirection，按钮标注为row。我的按钮标注位于底部，搜索标注仍位于顶部。我猜alignSelf: flex-end组件都相互呈现。

因此，现在我可以在Callout上使用justifyContent在中心或左侧或右侧（styles.container）上都使用标注。如何分别说明不同的项目？（center, flex-start, flex-end无关紧要！）

将两个标注都包装在未设置样式的justifySelf组件中，会在右上角呈现按钮标注，但是找不到搜索标注。

将它们都包装在标注中会导致按钮显示在左上角的右侧，而搜索标注又不再显示。

帮我理解所有这一切！谢谢：）

Answer 1

如果您尝试将import numpy as np import cv2 cap = cv2.VideoCapture('http://admin:*****@198.168.1.***') while(True): ret, frame = cap.read() cv2.imshow('Stream IP Camera OpenCV',frame) if cv2.waitKey(1) & 0xFF == ord('q'): break cap.release() cv2.destroyAllWindows()放在底部，请给它一个buttonCallout，这样它将保留在底部

postion:'absolute'

如何在React Native中将按钮放置在MapView的右下角？

1 个答案: