React-Native:与标题

时间:2018-06-11 09:54:11

标签: animation react-native react-native-maps

我正在使用react-native-maps,现在我可以更新驱动程序的位置并更新polyline。我想要实现的就像Uber一样,我希望将汽车设置为新的坐标,并将其旋转到相应的标题。 现在我能够更新折线,但没有动画,我做了一些研究,我知道我们使用Animated Markers,但找不到这个实现的文档。 我的渲染方法:

renderContent() {
    if (this.state.loading) {
      return (
        <Loading />
      );
    } else if (this.state.error) {
      return (
        <Card>
            <Heading> No directions available </Heading>
            <Button> 
              <Text> Retry </Text>
              <Icon name='refresh' />
            </Button>
        </Card>
      );
    } 
    if (this.props.liveLocation.origin !== null) {
      const { origin, des, coords } = this.props.liveLocation;
      return (
        <MapView
              provider='google'
              style={{ height: '100%', width: '100%' }}
              ref={ref => { this.map = ref; }}
              initialRegion={{
                latitude: Number(origin.lat),
                longitude: Number(origin.lng),
                longitudeDelta: 0.2,
                latitudeDelta: 0.2
              }}
              onLayout={this.onLayout}
        >
          {origin != null && <MapView.Marker 
            coordinate={{ latitude: Number(origin.lat), longitude: Number(origin.lng) }}
          >
            <Icon name='directions-car' />
          </MapView.Marker>}

           {des != null && <MapView.Marker 
            coordinate={{ latitude: Number(des.lat), longitude: Number(des.lng) }}
           >
             <Icon name='place' />
             </MapView.Marker>}

          {coords.length > 1 && 
                <MapView.Polyline
                            coordinates={coords}
                            strokeWidth={2}
                            strokeColor="black"
                />
                }
        </MapView>
      );
    }  
  }

原点有{lat,lng,heading等等}

0 个答案:

没有答案