質問編集履歴

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

2018/05/15 05:55

投稿

yamady

スコア176

test CHANGED Viewed

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

test CHANGED Viewed

@@ -1,551 +1,717 @@
-何度も申し訳ありません。
+質問の内容に不備がありましたので、再度こちらにて訂正させて載せさせていただきます。
+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)のですが、未解決のようです。。。
-### ソースコード
+変更点は下記の部分です。
+> Fetchするためのredux追加
+```JavaScript
+・・・
+const mapStateToProps = (state) => {
+  const markers = _.orderBy(state.markers, ['id'], ['desc']);
+  return { markers };
+};
+export default connect(mapStateToProps, {
+  markersFetch
-> AnimatedView.js
+})(AnimatedViews);
 ```
+> 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],
+    extrapolate: 'clamp',
+  });
+  const translateY = Animated.multiply(isIndex, panY);
+  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,
+    scale,
+    opacity,
+    anim,
+    center,
+    selected,
+    markerOpacity,
+    markerScale,
+  };
+}
+class AnimatedViews extends React.Component {
+  constructor(props) {
+    super(props);
+    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,
+      canMoveHorizontal: true,
+      scrollY,
+      scrollX,
+      scale,
+      translateY,
+      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;
+    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) => {
+    // we only want to move the view if they are starting the gesture on top
+    // of the view, so this calculates that and returns true if so. If we return
+    // false, the gesture should get passed to the map view appropriately.
+    const { panY } = this.state;
+    const { pageY } = e.nativeEvent;
+    const topOfMainWindow = ITEM_PREVIEW_HEIGHT + panY.__getValue();
+    const topOfTap = screen.height - pageY;
+    return topOfTap < topOfMainWindow;
+  }
+  onMoveShouldSetPanResponder = (e) => {
+    const { panY } = this.state;
+    const { pageY } = e.nativeEvent;
+    const topOfMainWindow = ITEM_PREVIEW_HEIGHT + panY.__getValue();
+    const topOfTap = screen.height - pageY;
+    return topOfTap < topOfMainWindow;
+  }
+  onPanXChange = ({ value }) => {
+    const { index } = this.state;
+    const newIndex = Math.floor(((-1 * value) + (SNAP_WIDTH / 2)) / SNAP_WIDTH);
+    if (index !== newIndex) {
+      this.setState({ index: newIndex });
+    }
+  }
+  onPanYChange = ({ value }) => {
+    const { canMoveHorizontal, region, scrollY, scrollX, index } = this.state;
+    const { markers } = this.props;
 ・・・
-  const selected = panX.interpolate({
-    inputRange: [xRight, xPos, xLeft],
-    outputRange: [0, 1, 0],
-    extrapolate: 'clamp',
-  });
-  const translateY = Animated.multiply(isIndex, panY);
-  const translateX = panX;
-・・・
-  return {
-    translateY,
-    translateX,
-    scale,
-    opacity,
-    anim,
-    center,
-    selected,
-    markerOpacity,
-    markerScale,
-  };
+  onRegionChange(/* region */) {
+    // this.state.region.setValue(region);
+  }
+  render() {
+    const {
+      panX,
+      panY,
+      animations,
+      canMoveHorizontal,
+      region,
+    } = this.state;
+    const { markers } = this.props;
+    return (
+      <View style={styles.container}>
+        <PanController
+          style={styles.container}
+          vertical
+          horizontal={canMoveHorizontal}
+          xMode="snap"
+          snapSpacingX={SNAP_WIDTH}
+          yBounds={[-1 * screen.height, 0]}
+          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}
+            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>
+          <View style={styles.itemContainer}>
+            {markers.map((marker, i) => {
+              const {
+                translateY,
+                translateX,
+                scale,
+                opacity,
+              } = animations[i];
+              return (
+                <Animated.View
+                  key={marker.id}
+                  style={[styles.item, {
+                    opacity,
+                    transform: [
+                      { translateY },
+                      { translateX },
+                      { scale },
+                    ],
+                  }]}
+                />
+              );
+            })}
+          </View>
+        </PanController>
+      </View>
+    );
+  }
 }
-class AnimatedViews extends React.Component {
-  constructor(props) {
-    super(props);
-    const { markers } = this.props;
-    const animations = markers.map((m, i) =>
-      getMarkerState(panX, panY, scrollY, i));
-・・・
-  componentWillMount() {
-    this.props.markersFetch();
-  }
-  componentDidMount() {
-    const { markers } = this.props;
-    const { region, panX, panY, scrollX } = this.state;
-    panX.addListener(this.onPanXChange);
-    panY.addListener(this.onPanYChange);
-・・・
-  }
-  onStartShouldSetPanResponder = (e) => {
-    // we only want to move the view if they are starting the gesture on top
-    // of the view, so this calculates that and returns true if so. If we return
-    // false, the gesture should get passed to the map view appropriately.
-    const { panY } = this.state;
-    const { pageY } = e.nativeEvent;
-    const topOfMainWindow = ITEM_PREVIEW_HEIGHT + panY.__getValue();
-    const topOfTap = screen.height - pageY;
-    return topOfTap < topOfMainWindow;
-  }
-  onMoveShouldSetPanResponder = (e) => {
-    const { panY } = this.state;
-    const { pageY } = e.nativeEvent;
-    const topOfMainWindow = ITEM_PREVIEW_HEIGHT + panY.__getValue();
-    const topOfTap = screen.height - pageY;
-    return topOfTap < topOfMainWindow;
-  }
-  onPanXChange = ({ value }) => {
-    const { index } = this.state;
-    const newIndex = Math.floor(((-1 * value) + (SNAP_WIDTH / 2)) / SNAP_WIDTH);
-    if (index !== newIndex) {
-      this.setState({ index: newIndex });
-    }
-  }
-  onPanYChange = ({ value }) => {
-    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,
-      animations,
-      canMoveHorizontal,
-      region,
-    } = this.state;
-    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>
-・・・
+AnimatedViews.propTypes = {
+  provider: ProviderPropType,
+};
+ ...
+const mapStateToProps = (state) => {
+  const markers = _.orderBy(state.markers, ['id'], ['desc']);
+  return { markers };
+};
+export default connect(mapStateToProps, {
+  markersFetch
+})(AnimatedViews);
 ```
-下記のコンポーネントを引っ張ってきています。
-> 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
-```
-{screenProps: undefined, markers: Array(2), markersFetch: ƒ}
-markers:Array(2)
-0:
-amount:"30"
-coordinate:{longitude: -122.406417, latitude: 37.785834}
-id:"1"
-name:"Test2"
-__proto__:Object1
-・・・
-```
-> this.state
-![state結果](a6ba214d4d823ce4079109d3bd0aa828.png)
-stateが何も取れていないところから、propsで取得したmarkersがきちんとstateの方にはまっていないのではないかと思うのですが。。すみませんが、お手すきの際にどうぞおたすけください。

const animationsを追記しました。

2018/05/15 05:55

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -94,6 +94,10 @@
+    const animations = markers.map((m, i) =>
+      getMarkerState(panX, panY, scrollY, i));
 ・・・

AnimatedPlaceView.jsを追記しました

2018/05/14 17:58

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -394,6 +394,114 @@
+下記のコンポーネントを引っ張ってきています。
+> 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>
+    );
+  }
+}
+```
 ### コンソール結果

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

2018/05/14 06:59

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -312,6 +312,82 @@
+          <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>
 ・・・
 ```