質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Q&A

解決済

2回答

528閲覧

【React Native + expo】react-navigationを使った画面にスライダーを設置した時に挙動がおかしくなる

sofu

総合スコア13

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

0グッド

0クリップ

投稿2019/08/01 02:22

編集2019/08/01 02:28

前提・実現したいこと

既存の質問を検索して探したのですが、該当するものがなく新規で質問させていただきます。

React Native(expo) の初期構築でtabsを選択して、タブ付きの画面を構築しました。
イメージ説明

ホーム画面(HomeScreen.js)にスライダーを設置してみたところ、スライダーの動きが鈍くなったのですが、動きを改善する方法はありますでしょうか。

▼expoクライアント経由で実機(iPhone 6)にて確認
イメージ説明

どなたかご教授いただけますと幸いです。

React自体あまりさわったことがないので、これが初歩的な質問になるようでしたら申し訳ございません。。。

発生している問題・エラーメッセージ

エラーメッセージは特に出力されていませんでした。

該当のソースコード

HomeScreen.js

js

1import * as WebBrowser from 'expo-web-browser'; 2import React, { useEffect, useState } from 'react'; 3 4import { 5 Slider, 6 Image, 7 Platform, 8 ScrollView, 9 StyleSheet, 10 Text, 11 TouchableOpacity, 12 View, 13} from 'react-native'; 14 15import { MonoText } from '../components/StyledText'; 16 17export default function HomeScreen() { 18 const [value, setValue] = useState(0); 19 20 return ( 21 <View style={styles.container}> 22 <ScrollView 23 style={styles.container} 24 contentContainerStyle={styles.contentContainer}> 25 <View style={styles.welcomeContainer}> 26 <Image 27 source={ 28 __DEV__ 29 ? require('../assets/images/robot-dev.png') 30 : require('../assets/images/robot-prod.png') 31 } 32 style={styles.welcomeImage} 33 /> 34 </View> 35 <Text>{value}</Text> 36 <Slider style={styles.slider} value={value} onValueChange={val => setValue(val)} /> 37 38 <View style={styles.getStartedContainer}> 39 <DevelopmentModeNotice /> 40 41 <Text style={styles.getStartedText}>Get started by opening</Text> 42 43 <View 44 style={[styles.codeHighlightContainer, styles.homeScreenFilename]}> 45 <MonoText>screens/HomeScreen.js</MonoText> 46 </View> 47 48 <Text style={styles.getStartedText}> 49 Change this text and your app will automatically reload. 50 </Text> 51 </View> 52 53 <View style={styles.helpContainer}> 54 <TouchableOpacity onPress={handleHelpPress} style={styles.helpLink}> 55 <Text style={styles.helpLinkText}> 56 Help, it didn’t automatically reload! 57 </Text> 58 </TouchableOpacity> 59 </View> 60 </ScrollView> 61 62 <View style={styles.tabBarInfoContainer}> 63 <Text style={styles.tabBarInfoText}> 64 This is a tab bar. You can edit it in: 65 </Text> 66 67 <View 68 style={[styles.codeHighlightContainer, styles.navigationFilename]}> 69 <MonoText style={styles.codeHighlightText}> 70 navigation/MainTabNavigator.js 71 </MonoText> 72 </View> 73 </View> 74 </View> 75 ); 76} 77 78HomeScreen.navigationOptions = { 79 header: null, 80}; 81 82function DevelopmentModeNotice() { 83 if (__DEV__) { 84 const learnMoreButton = ( 85 <Text onPress={handleLearnMorePress} style={styles.helpLinkText}> 86 Learn more 87 </Text> 88 ); 89 90 return ( 91 <Text style={styles.developmentModeText}> 92 Development mode is enabled: your app will be slower but you can use 93 useful development tools. {learnMoreButton} 94 </Text> 95 ); 96 } else { 97 return ( 98 <Text style={styles.developmentModeText}> 99 You are not in development mode: your app will run at full speed. 100 </Text> 101 ); 102 } 103} 104 105function handleLearnMorePress() { 106 WebBrowser.openBrowserAsync( 107 'https://docs.expo.io/versions/latest/workflow/development-mode/' 108 ); 109} 110 111function handleHelpPress() { 112 WebBrowser.openBrowserAsync( 113 'https://docs.expo.io/versions/latest/workflow/up-and-running/#cant-see-your-changes' 114 ); 115} 116 117const styles = StyleSheet.create({ 118 container: { 119 flex: 1, 120 backgroundColor: '#fff', 121 }, 122 developmentModeText: { 123 marginBottom: 20, 124 color: 'rgba(0,0,0,0.4)', 125 fontSize: 14, 126 lineHeight: 19, 127 textAlign: 'center', 128 }, 129 contentContainer: { 130 paddingTop: 30, 131 }, 132 welcomeContainer: { 133 alignItems: 'center', 134 marginTop: 10, 135 marginBottom: 20, 136 }, 137 welcomeImage: { 138 width: 100, 139 height: 80, 140 resizeMode: 'contain', 141 marginTop: 3, 142 marginLeft: -10, 143 }, 144 getStartedContainer: { 145 alignItems: 'center', 146 marginHorizontal: 50, 147 }, 148 homeScreenFilename: { 149 marginVertical: 7, 150 }, 151 codeHighlightText: { 152 color: 'rgba(96,100,109, 0.8)', 153 }, 154 codeHighlightContainer: { 155 backgroundColor: 'rgba(0,0,0,0.05)', 156 borderRadius: 3, 157 paddingHorizontal: 4, 158 }, 159 getStartedText: { 160 fontSize: 17, 161 color: 'rgba(96,100,109, 1)', 162 lineHeight: 24, 163 textAlign: 'center', 164 }, 165 tabBarInfoContainer: { 166 position: 'absolute', 167 bottom: 0, 168 left: 0, 169 right: 0, 170 ...Platform.select({ 171 ios: { 172 shadowColor: 'black', 173 shadowOffset: { width: 0, height: -3 }, 174 shadowOpacity: 0.1, 175 shadowRadius: 3, 176 }, 177 android: { 178 elevation: 20, 179 }, 180 }), 181 alignItems: 'center', 182 backgroundColor: '#fbfbfb', 183 paddingVertical: 20, 184 }, 185 tabBarInfoText: { 186 fontSize: 17, 187 color: 'rgba(96,100,109, 1)', 188 textAlign: 'center', 189 }, 190 navigationFilename: { 191 marginTop: 5, 192 }, 193 helpContainer: { 194 marginTop: 15, 195 alignItems: 'center', 196 }, 197 helpLink: { 198 paddingVertical: 15, 199 }, 200 helpLinkText: { 201 fontSize: 14, 202 color: '#2e78b7', 203 }, 204}); 205

試したこと

App.jsにスライダーを設置したらスムーズに動きましたが、設置したいのはHomeScreen.jsになります。
react-native-sliderプラグインを使うと、多少スムーズに動きましたが、それでもカクカクした動きが残っていました。

補足情報(FW/ツールのバージョンなど)

package.jsonは下記になります。

json

1{ 2 "main": "node_modules/expo/AppEntry.js", 3 "scripts": { 4 "start": "expo start", 5 "android": "expo start --android", 6 "ios": "expo start --ios", 7 "web": "expo start --web", 8 "eject": "expo eject", 9 "test": "jest --watchAll" 10 }, 11 "jest": { 12 "preset": "jest-expo" 13 }, 14 "dependencies": { 15 "@expo/samples": "~3.0.3", 16 "@expo/vector-icons": "^10.0.3", 17 "@react-navigation/web": "^1.0.0-alpha.9", 18 "expo": "^34.0.1", 19 "expo-asset": "^6.0.0", 20 "expo-constants": "6.0.0", 21 "expo-font": "6.0.0", 22 "expo-web-browser": "6.0.0", 23 "react": "16.8.3", 24 "react-dom": "^16.8.6", 25 "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz", 26 "react-native-gesture-handler": "~1.3.0", 27 "react-native-slider": "^0.11.0", 28 "react-native-web": "^0.11.4", 29 "react-navigation": "^3.11.0" 30 }, 31 "devDependencies": { 32 "babel-preset-expo": "^6.0.0", 33 "jest-expo": "^34.0.0" 34 }, 35 "private": true 36}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

スライダーを動かすたびに多数の子コーポネントが再レンダリングされてカクカクした動きになっていたみたいです。
React.memoとReact.useMemo等を使い、必要な時だけ再レンダリングするようにして回避できました。

投稿2019/09/26 01:17

sofu

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

publishしたアプリですと動きが大分よくなりました。
expo startでの表示は相変わらずおかしいですが、一旦これで進めたいと思います。

投稿2019/08/07 03:21

sofu

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問