2016-09-26 18 views
0

airbnb/react-native-mapsを使用して、マーカーに移動してGoogleマップで開くツールバーが起動時に異常な動作をします。長い時間アプリをナビゲートした後、またはデバイスをランドスケープにすると表示されます。しかし、私は、ツールバーが表示されないアプリを開くとき。私が見逃した出来事や財産がありますか?それを一周するオープンアプリではツールバーが表示されませんが、デバイスを横向きにすると表示されます

enter image description here

render() { 
    const { region, markers,air } = this.state; 

    return (

    <MapView 
     style={Styles.map} 
     initialRegion={region} 
     loadingEnabled={true} 
     toolbarEnabled={true} 
     loadingIndicatorColor={"#666666"} 
     loadingBackgroundColor={"#eeeeee"} 
    > 
     {this.state.air.map(marker => (
     <MapView.Marker 
      key={marker.created_at} 
      coordinate={{ 
      latitude: parseFloat(marker.latitude), 
      longitude: parseFloat(marker.longitude), 
      }} 
      pinColor='#38b57f' 
      title={marker.artist.name} 
      description={marker.adress} 
      onCalloutPress={this._gotoObraView.bind(this, {marker: marker})} 
     /> 
    ))} 
    </MapView> 
    ); 
} 

i openned a issue as well in github project page

+0

シェアあなたのコード –

+0

@PradeepGupta私は真のツールバーに向けるrenderメソッドを追加しました:

は、私はそれがここ;-)

を助け、そのためのコードであると思います。ツールバーは動作しますが、アプリが数分後に開くときや、デバイスが不思議です。 – diogopalhais

答えて

1

、私は少しハックを作りました。私はあなたが少なくとも一度は画面のサイズを更新すると、バーが表示されることに気付きました。 次に、最初にスタイルプロパティ 'bottom'を1に設定しました(ユーザーは気づきません)、そのプロパティをコンポーネントの状態の一部にします。

最初にユーザーがマーカーを1つ選択したとき、状態のプロパティ「bottom」を0に設定して、コンポーネントを再度レンダリングし、マップの寸法を再調整します。バーが表示されます。

class Locations extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
       bottom: 1 
       } 
    } 

     toolbarHack =() => { 
      if(this.state.bottom === 1){ 
      this.setState({ 
       bottom: 0 
      }) 
      } 
     } 

    render() { 

     return (
     <View style ={styles.container}> 
      <MapView 
      style={ [styles.map, { bottom:this.state.bottom}] } 
      region={region} 
      toolbarEnabled={true} > 

      { 
       this.props.markers.map((marker) => 
       (<MapView.Marker 
        coordinate={{longitude: marker.longitude, latitude: marker.latitude}} 
        key={marker.id} 
        onPress={() => this.toolbarHack()} 
        /> 
       )) 
        } 
      </MapView> 
     </View> 
    ); 
    } 
    } 
+0

この作品です! :) – Yonedev

関連する問題