Question

所以我试图使用airbnb的react-native-maps，但它似乎没有显示它甚至不是空白（即使我给它一个绝对值，它甚至不占用空间）。我检查了android清单，我已经完成了react-native链接的事情，每个依赖都在那里。我已经尝试了一切。

import React, { Component } from 'react';

import {
  Container,
  Header,
  Title,
  Content,
  Button,
  Icon,
  List,
  ListItem,
  CheckBox,
  Text,
  Left,
  Right,
  Body,
} from 'native-base';

import {
  View,
} from 'react-native'


import styles from './styles';

import MapView from 'react-native-maps';

class NHCheckbox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkbox1: true,
      checkbox2: true,
      checkbox3: true,
      checkbox4: false,
      region: {
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }
    };
  }

  onRegionChange(region) {
    this.setState({ region });
  }


  toggleSwitch1() {
    this.setState({
      checkbox1: !this.state.checkbox1,
    });
  }

  toggleSwitch2() {
    this.setState({
      checkbox2: !this.state.checkbox2,
    });
  }

  toggleSwitch3() {
    this.setState({
      checkbox3: !this.state.checkbox3,
    });
  }

  toggleSwitch4() {
    this.setState({
      checkbox4: !this.state.checkbox4,
    });
  }

  render() {
    return (
      <Container style={styles.container}>
        <Header>
          <Left>
            <Button transparent onPress={() => this.props.navigation.navigate('DrawerOpen')}>
              <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title>Check Box</Title>
          </Body>
          <Right />
        </Header>

        <View style ={styles.container2}>
        <MapView
          style={styles.map2}
          region={this.state.region}
          onRegionChange={this.onRegionChange}
        />
        </View>


        <Content>
          <View style ={styles.container2}>
            <MapView
              style={styles.map2}
              region={this.state.region}
              onRegionChange={this.onRegionChange}
            />
          </View>

          <Text>{JSON.stringify(this.state.region)}</Text>

          <ListItem button onPress={() => this.toggleSwitch1()}>
            <CheckBox checked={this.state.checkbox1} onPress={() => this.toggleSwitch1()} />
            <Body>
              <Text>Lunch Break</Text>
            </Body>
          </ListItem>
          <ListItem button onPress={() => this.toggleSwitch2()}>
            <CheckBox color="red" checked={this.state.checkbox2} onPress={() => this.toggleSwitch2()} />
            <Body>
              <Text>Daily Stand Up</Text>
            </Body>
          </ListItem>
          <ListItem button onPress={() => this.toggleSwitch3()}>
            <CheckBox color="green" checked={this.state.checkbox3} onPress={() => this.toggleSwitch3()} />
            <Body>
              <Text>Finish list Screen</Text>
            </Body>
          </ListItem>
          <ListItem button onPress={() => this.toggleSwitch4()}>
            <CheckBox color="#000" checked={this.state.checkbox4} onPress={() => this.toggleSwitch4()} />
            <Body>
              <Text>Discussion with Client</Text>
            </Body>
          </ListItem>
        </Content>
      </Container>
    );
  }
}

export default NHCheckbox;

styles.js

const React = require('react-native');

const { StyleSheet } = React;

export default {
  container: {
    backgroundColor: '#FFF',
  },
  container2: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map2: {
    ...StyleSheet.absoluteFillObject,
  },

};

Answer 1

假设您的AndroidManifest.xml正确包含了Google API密钥，请尝试将所有...StyleSheet.absoluteFillObject替换为flex: 1，以便在不使用绝对值的情况下将视图完全拉伸到其父级内。

React Native Airbnb谷歌地图甚至不会出现

1 个答案: