質問編集履歴

質問内容を書き直しました

2018/05/15 05:55

投稿

yamady

スコア176

title CHANGED Viewed

	@@ -1,1 +1,1 @@
1	- ~~Fetch~~した~~データを使ってstateのデータを変更~~したい（react native）
1	+ AnimatedViewをfetchしたViewで表示したい（react native）

body CHANGED Viewed

@@ -1,20 +1,76 @@
-何度も申し訳ありません。
+質問の内容に不備がありましたので、再度こちらにて訂正させて載せさせていただきます。
+React Native Mapというライブラリで、Animated Viewを表示できるようにしたいと考えています。
-React Native Mapsの[Animated View](https://github.com/react-community/react-native-maps/blob/master/example/examples/AnimatedViews.js)をデータベースからFetchしたデータを入れ込んで、表示を実現しようとしています。
+[こちらのリンク先にあるAnimatedView.js](https://github.com/react-community/react-native-maps/blob/master/example/examples/AnimatedViews.js)をコピペするとちゃんと表示されるのですが、自前のデータベースからFetchしてきたデータを当てようとすると下記のエラーが生じてしまいます。
-しかし、下記のエラーが生じてしまい表示できずじまいです。。
 ```
-TypeError: Cannot read property 'selected' of undefined
+Invariant Violation: outputRange must have at least 2 elements
 ```
+※[こちらのエラーをぐぐってみた](https://github.com/react-community/react-native-maps/issues/746)のですが、未解決のようです。。。
-### ソースコード
+変更点は下記の部分です。
-> AnimatedView.js
+> Fetchするためのredux追加
+```JavaScript
+・・・
+const mapStateToProps = (state) => {
+  const markers = _.orderBy(state.markers, ['id'], ['desc']);
+  return { markers };
+};
+export default connect(mapStateToProps, {
+  markersFetch
+})(AnimatedViews);
 ```
-function getMarkerState(panX, panY, scrollY, i) {
+> this.stateで出していたmarkersをthis.propsで書き換え
+```JavaScript
+    const {
+　 　　・・・
+      markers
+    } = this.state;
+```
+上記の部分を下記のように書き換えました。
+```JavaScript
+    const { markers } = this.props;
+```
+どのようにして解決すればよろしいでしょうか・・・。
+お手数ですが、おたすけくださいませ。
+▼ソースコードはこちらです
+```JavaScript
 ・・・
+function getMarkerState(panX, panY, scrollY, i) {
+  const xLeft = (-SNAP_WIDTH * i) + (SNAP_WIDTH / 2);
+  const xRight = (-SNAP_WIDTH * i) - (SNAP_WIDTH / 2);
+  const xPos = -SNAP_WIDTH * i;
+  const isIndex = panX.interpolate({
+    inputRange: [xRight - 1, xRight, xLeft, xLeft + 1],
+    outputRange: [0, 1, 1, 0],
+    extrapolate: 'clamp',
+  });
+  const isNotIndex = panX.interpolate({
+    inputRange: [xRight - 1, xRight, xLeft, xLeft + 1],
+    outputRange: [1, 0, 0, 1],
+    extrapolate: 'clamp',
+  });
+  const center = panX.interpolate({
+    inputRange: [xPos - 10, xPos, xPos + 10],
+    outputRange: [0, 1, 0],
+    extrapolate: 'clamp',
+  });
   const selected = panX.interpolate({
     inputRange: [xRight, xPos, xLeft],
     outputRange: [0, 1, 0],
@@ -25,8 +81,53 @@
   const translateX = panX;
+  const anim = Animated.multiply(isIndex, scrollY.interpolate({
+    inputRange: [0, BREAKPOINT1],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
-・・・
+  }));
+  const scale = Animated.add(ONE, Animated.multiply(isIndex, scrollY.interpolate({
+    inputRange: [BREAKPOINT1, BREAKPOINT2],
+    outputRange: [0, SCALE_END - 1],
+    extrapolate: 'clamp',
+  })));
+  // [0 => 1]
+  let opacity = scrollY.interpolate({
+    inputRange: [BREAKPOINT1, BREAKPOINT2],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+  // if i === index: [0 => 0]
+  // if i !== index: [0 => 1]
+  opacity = Animated.multiply(isNotIndex, opacity);
+  // if i === index: [1 => 1]
+  // if i !== index: [1 => 0]
+  opacity = opacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0],
+  });
+  let markerOpacity = scrollY.interpolate({
+    inputRange: [0, BREAKPOINT1],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+  markerOpacity = Animated.multiply(isNotIndex, markerOpacity).interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0],
+  });
+  const markerScale = selected.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 1.2],
+  });
   return {
     translateY,
     translateX,
@@ -46,22 +147,72 @@
     const { markers } = this.props;
+    const panX = new Animated.Value(0);
+    const panY = new Animated.Value(0);
+    const scrollY = panY.interpolate({
+      inputRange: [-1, 1],
+      outputRange: [1, -1],
+    });
+    const scrollX = panX.interpolate({
+      inputRange: [-1, 1],
+      outputRange: [1, -1],
+    });
+    const scale = scrollY.interpolate({
+      inputRange: [0, BREAKPOINT1],
+      outputRange: [1, 1.6],
+      extrapolate: 'clamp',
+    });
+    const translateY = scrollY.interpolate({
+      inputRange: [0, BREAKPOINT1],
+      outputRange: [0, -100],
+      extrapolate: 'clamp',
+    });
     const animations = markers.map((m, i) =>
       getMarkerState(panX, panY, scrollY, i));
-・・・
+    this.state = {
+      panX,
+      panY,
+      animations,
+      index: 0,
-  componentWillMount() {
+      canMoveHorizontal: true,
+      scrollY,
+      scrollX,
+      scale,
+      translateY,
-    this.props.markersFetch();
+      region: new AnimatedRegion({
+        latitude: LATITUDE,
+        longitude: LONGITUDE,
+        latitudeDelta: LATITUDE_DELTA,
+        longitudeDelta: LONGITUDE_DELTA,
+      }),
+    };
   }
   componentDidMount() {
+    const { region, panX, panY, scrollX } = this.state;
     const { markers } = this.props;
-    const { region, panX, panY, scrollX } = this.state;
     panX.addListener(this.onPanXChange);
     panY.addListener(this.onPanYChange);
+    region.stopAnimation();
+    region.timing({
+      latitude: scrollX.interpolate({
+        inputRange: markers.map((m, i) => i * SNAP_WIDTH),
+        outputRange: markers.map(m => m.coordinate.latitude),
-・・・
+      }),
+      longitude: scrollX.interpolate({
+        inputRange: markers.map((m, i) => i * SNAP_WIDTH),
+        outputRange: markers.map(m => m.coordinate.longitude),
+      }),
+      duration: 0,
+    }).start();
   }
   onStartShouldSetPanResponder = (e) => {
@@ -94,58 +245,16 @@
   }
   onPanYChange = ({ value }) => {
+    const { canMoveHorizontal, region, scrollY, scrollX, index } = this.state;
     const { markers } = this.props;
-    const { canMoveHorizontal, region, scrollY, scrollX, index } = this.state;
-    const shouldBeMovable = Math.abs(value) < 2;
-    if (shouldBeMovable !== canMoveHorizontal) {
-      this.setState({ canMoveHorizontal: shouldBeMovable });
-      if (!shouldBeMovable) {
-        const { coordinate } = markers[index];
-        region.stopAnimation();
-        region.timing({
-          latitude: scrollY.interpolate({
-            inputRange: [0, BREAKPOINT1],
-            outputRange: [
-              coordinate.latitude,
-              coordinate.latitude - (LATITUDE_DELTA * 0.5 * 0.375),
-            ],
-            extrapolate: 'clamp',
-          }),
-          latitudeDelta: scrollY.interpolate({
-            inputRange: [0, BREAKPOINT1],
-            outputRange: [LATITUDE_DELTA, LATITUDE_DELTA * 0.5],
-            extrapolate: 'clamp',
-          }),
-          longitudeDelta: scrollY.interpolate({
-            inputRange: [0, BREAKPOINT1],
-            outputRange: [LONGITUDE_DELTA, LONGITUDE_DELTA * 0.5],
-            extrapolate: 'clamp',
-          }),
-          duration: 0,
-        }).start();
-      } else {
-        region.stopAnimation();
-        region.timing({
-          latitude: scrollX.interpolate({
-            inputRange: markers.map((m, i) => i * SNAP_WIDTH),
-            outputRange: markers.map(m => m.coordinate.latitude),
-          }),
-          longitude: scrollX.interpolate({
-            inputRange: markers.map((m, i) => i * SNAP_WIDTH),
-            outputRange: markers.map(m => m.coordinate.longitude),
-          }),
-          duration: 0,
-        }).start();
-      }
-    }
-  }
+・・・
   onRegionChange(/* region */) {
     // this.state.region.setValue(region);
   }
   render() {
-    const { markers } = this.props;
     const {
       panX,
       panY,
@@ -153,19 +262,27 @@
       canMoveHorizontal,
       region,
     } = this.state;
+    const { markers } = this.props;
+    return (
-    console.log('this.props', this.props);
+      <View style={styles.container}>
+        <PanController
+          style={styles.container}
+          vertical
+          horizontal={canMoveHorizontal}
+          xMode="snap"
+          snapSpacingX={SNAP_WIDTH}
+          yBounds={[-1 * screen.height, 0]}
-    console.log('this.state', this.state);
+          xBounds={[-screen.width * (markers.length - 1), 0]}
+          panY={panY}
+          panX={panX}
+          onStartShouldSetPanResponder={this.onStartShouldSetPanResponder}
+          onMoveShouldSetPanResponder={this.onMoveShouldSetPanResponder}
+        >
           <AnimatedMap
             provider={this.props.provider}
             style={styles.map}
-            region={{
+            region={region}
-              latitude: 35.6797392,
-              longitude: 139.7348855,
-              latitudeDelta: 0.0922,
-              longitudeDelta: 0.0421,
-            }}
             onRegionChange={this.onRegionChange}
           >
             {markers.map((marker, i) => {
@@ -194,83 +311,49 @@
               );
             })}
           </AnimatedMap>
+          <View style={styles.itemContainer}>
+            {markers.map((marker, i) => {
+              const {
+                translateY,
+                translateX,
+                scale,
+                opacity,
+              } = animations[i];
-・・・
-```
-下記のコンポーネントを引っ張ってきています。
-> AnimatedPlaceView.js
-```
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  StyleSheet,
-  Text,
-  Animated,
-} from 'react-native';
-class AnimatedPriceMarker extends React.Component {
-  render() {
-    const { amount, selected, style } = this.props;
-    const background = selected.interpolate({
-      inputRange: [0, 1],
-      outputRange: ['#005E7F', '#00A0D8'],
-    });
-    const border = selected.interpolate({
-      inputRange: [0, 1],
-      outputRange: ['#005E7F', '#00A0D8'],
-    });
-    return (
+              return (
-      <Animated.View style={[styles.container, style]}>
-        <Animated.View
+                <Animated.View
+                  key={marker.id}
+                  style={[styles.item, {
+                    opacity,
+                    transform: [
+                      { translateY },
+                      { translateX },
-          style={[
+                      { scale },
-            styles.bubble,
-            {
-              backgroundColor: background,
-              borderColor: border,
-            },
+                    ],
-          ]}
+                  }]}
-        >
-          <Text style={styles.dollar}>$</Text>
-          <Text style={styles.amount}>{amount}</Text>
-        </Animated.View>
-        <Animated.View
-          style={[styles.arrowBorder, { borderTopColor: border }]}
-        />
+                />
-        <Animated.View
-          style={[styles.arrow, { borderTopColor: background }]}
-        />
+              );
+            })}
-      </Animated.View>
+          </View>
+        </PanController>
+      </View>
     );
   }
 }
-```
+AnimatedViews.propTypes = {
-### コンソール結果
+  provider: ProviderPropType,
+};
-> this.props
+ ...
-```
+const mapStateToProps = (state) => {
-{screenProps: undefined, markers: Array(2), markersFetch: ƒ}
+  const markers = _.orderBy(state.markers, ['id'], ['desc']);
-markers:Array(2)
-0:
-amount:"30"
-coordinate:{longitude: -122.406417, latitude: 37.785834}
-id:"1"
-name:"Test2"
-__proto__:Object1
+  return { markers };
-・・・
+};
-```
+export default connect(mapStateToProps, {
-> this.state
+  markersFetch
-![state結果](a6ba214d4d823ce4079109d3bd0aa828.png)
+})(AnimatedViews);
-stateが何も取れていないところから、propsで取得したmarkersがきちんとstateの方にはまっていないのではないかと思うのですが。。すみませんが、お手すきの際にどうぞおたすけください。
+```

const animationsを追記しました。

2018/05/15 05:55

投稿

yamady

スコア176

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -46,6 +46,8 @@
     const { markers } = this.props;
+    const animations = markers.map((m, i) =>
+      getMarkerState(panX, panY, scrollY, i));
 ・・・
   componentWillMount() {

AnimatedPlaceView.jsを追記しました

2018/05/14 17:58

投稿

yamady

スコア176

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -196,6 +196,60 @@
 ・・・
 ```
+下記のコンポーネントを引っ張ってきています。
+> AnimatedPlaceView.js
+```
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  StyleSheet,
+  Text,
+  Animated,
+} from 'react-native';
+class AnimatedPriceMarker extends React.Component {
+  render() {
+    const { amount, selected, style } = this.props;
+    const background = selected.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['#005E7F', '#00A0D8'],
+    });
+    const border = selected.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['#005E7F', '#00A0D8'],
+    });
+    return (
+      <Animated.View style={[styles.container, style]}>
+        <Animated.View
+          style={[
+            styles.bubble,
+            {
+              backgroundColor: background,
+              borderColor: border,
+            },
+          ]}
+        >
+          <Text style={styles.dollar}>$</Text>
+          <Text style={styles.amount}>{amount}</Text>
+        </Animated.View>
+        <Animated.View
+          style={[styles.arrowBorder, { borderTopColor: border }]}
+        />
+        <Animated.View
+          style={[styles.arrow, { borderTopColor: background }]}
+        />
+      </Animated.View>
+    );
+  }
+}
+```
 ### コンソール結果
 > this.props

selectedのview部分を追記しました

2018/05/14 06:59

投稿

yamady

スコア176

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -155,6 +155,44 @@
     console.log('this.props', this.props);
     console.log('this.state', this.state);
+          <AnimatedMap
+            provider={this.props.provider}
+            style={styles.map}
+            region={{
+              latitude: 35.6797392,
+              longitude: 139.7348855,
+              latitudeDelta: 0.0922,
+              longitudeDelta: 0.0421,
+            }}
+            onRegionChange={this.onRegionChange}
+          >
+            {markers.map((marker, i) => {
+              const {
+                selected,
+                markerOpacity,
+                markerScale,
+              } = animations[i];
+              return (
+                <Marker
+                  key={marker.id}
+                  coordinate={marker.coordinate}
+                >
+                  <PriceMarker
+                    style={{
+                      opacity: markerOpacity,
+                      transform: [
+                        { scale: markerScale },
+                      ],
+                    }}
+                    amount={marker.amount}
+                    selected={selected}
+                  />
+                </Marker>
+              );
+            })}
+          </AnimatedMap>
 ・・・
 ```