Q&A
ReactNativeの勉強をしている大学生です。この度は閲覧いただきありがとうございます。
UIツールとしてnative-baseを利用しているのですが、DeckSwiperを使用し、実際にswipeした際にanimate関連の警告がコンソールに出てきます。動作はexpoで行っています。
該当部分コード(もちろんimportは確実に行えており、DeckSwiper部分はほとんど公式のコピペです。)
const cards = [ { text: "Card One", name: "One", image: require("./assets/img1.jpg"), }, { text: "Card Two", name: "Two", image: require("./assets/img2.jpg"), }, { text: "Card Three", name: "Three", image: require("./assets/img3.jpg"), }, { text: "Card Four", name: "Four", image: require("./assets/img4.jpg"), }, { text: "Card Five", name: "Five", image: require("./assets/img5.jpg"), }, ]; export default class DeckSwiperExample extends React.Component { // constructor(props) { // super(props); // this.onImportClick = this.onImportClick.bind(this); // } render() { return ( <Container> <Header /> <View> <DeckSwiper ref={(c) => (this._deckSwiper = c)} onSwipeRight={(item) => alert(item.text)} onSwipeLeft={(item) => console.log(item.text)} renderEmpty={() => alert("finished!")} dataSource={cards} // looping={false} renderItem={(item) => ( <Card style={{ elevation: 3 }}> <CardItem> <Left> <Thumbnail source={item.image} /> <Body> <Text>{item.text}</Text> <Text note>NativeBase</Text> </Body> </Left> </CardItem> <CardItem cardBody> <Image style={{ height: 300, flex: 1 }} source={item.image} /> </CardItem> <CardItem> <Icon name="heart" style={{ color: "#ED4A6A" }} /> <Text>{item.name}</Text> </CardItem> </Card> )} /> </View> <View style={{ flexDirection: "row", flex: 1, position: "absolute", bottom: 25, left: 0, right: 0, justifyContent: "space-between", padding: 15, }} > <Button iconLeft onPress={() => this._deckSwiper._root.swipeLeft()}> <Icon name="arrow-back" /> <Text>Swipe Left</Text> </Button> <Button iconRight onPress={() => this._deckSwiper._root.swipeRight()}> <Text>Swipe Right</Text> <Icon name="arrow-forward" /> </Button> </View> </Container> ); } }
該当エラー
Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false` * [native code]:null in __expoConsoleLog - node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn - node_modules\react-native\Libraries\YellowBox\YellowBox.js:162:6 in registerWarning - node_modules\react-native\Libraries\YellowBox\YellowBox.js:88:8 in warnImpl - node_modules\react-native\Libraries\YellowBox\YellowBox.js:66:4 in console.warn - node_modules\expo\build\environment\muteWarnings.fx.js:18:4 in warn - node_modules\react-native\Libraries\Animated\src\NativeAnimatedHelper.js:281:4 in shouldUseNativeDriver - node_modules\react-native\Libraries\Animated\src\animations\DecayAnimation.js:52:49 in constructor - node_modules\react-native\Libraries\Animated\src\AnimatedImplementation.js:256:24 in start - node_modules\react-native\Libraries\Animated\src\AnimatedImplementation.js:262:13 in start - node_modules\react-native\Libraries\Animated\src\AnimatedImplementation.js:383:10 in animations.forEach$argument_0 * [native code]:null in forEach - node_modules\react-native\Libraries\Animated\src\AnimatedImplementation.js:365:6 in result.start - node_modules\@codler\react-native-keyboard-aware-scroll-view\lib\KeyboardAwareHOC.js:230:8 in Object.values.forEach$argument_0 - node_modules\react-native\Libraries\Interaction\PanResponder.js:572:12 in clearInteractionHandle - node_modules\react-native\Libraries\Interaction\PanResponder.js:490:30 in panHandlers.onResponderRelease - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:286:4 in invokeGuardedCallbackImpl - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:497:2 in invokeGuardedCallback - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:521:2 in invokeGuardedCallbackAndCatchFirstError - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:683:41 in executeDispatch - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:707:19 in executeDispatchesInOrder - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:872:28 in executeDispatchesAndRelease * [native code]:null in forEach - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:851:4 in forEachAccumulated - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:897:20 in runEventsInBatch - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:1069:18 in runExtractedPluginEventsInBatch - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2835:35 in batchedUpdates$argument_0 - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20569:13 in batchedUpdates$1 - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2731:29 in batchedUpdates - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2834:16 in _receiveRootNodeIDEvent - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2911:27 in receiveTouches - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425:19 in __callFunction - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:6 in __guard$argument_0 - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:4 in callFunctionReturnFlushedQueue * [native code]:null in callFunctionReturnFlushedQueue
字数の問題で描き切れていませんが、2回
Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false` ```と出てきており、困っています。(2つとも警告内容は全く同じ) 試したこと →Animated.timingの後にuseNativeDriverをtrueかfalseで設定すればよいとのことで調べてみましたが、[このgitのコード変更](https://github.com/GeekyAnts/NativeBase/commit/5c190746544293aa9c434c4831771f7e17043317)にて既に対処されていました。自分のコードを確認しましたが、全く同じコードになっていました。 現在は全く見当もついていません。博識な方で何かわかることがございましたら、是非ご教授いただけると幸いです。
回答1件
0
あくまで憶測なのですが・・・
DeckSwiperのuseNativeDriverに関わる部分は修正されているけれども、他のコンポーネントではまだ対応していないのかもしれません。
例えば下記のnative-baseのIssueですが、<Item>のパラメータによっては同じ警告が出るようです。
IssueがOpenになっているのでまだライブラリまで修正が及んでいないようです。
useNativeDriver関連の警告はReactNativeのバージョンを上げると様々なライブラリで発生するようなので、native-baseに限らずソースで関連するライブラリ全てが対応完了しないと発生する可能性はありそうです(もしくは元ライブラリでは対応完了しているが、expoには未反映というケースもあるかもしれません)。
投稿2020/09/22 14:19
総合スコア2411
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/22 14:25