下記HPを参照
docs.swmansion.com
Documentationを直接読むことはあまりやってきませんでしたが、上記HPについてはかなり読みやすそうなので、メモしながら読んでいくことにします。
その前に、2023／1／19から、Expo GOがうまく動かなかったので、原因を考えると、
プロジェクトのExpoバージョンと、Expo Goのバージョンがあっていないことが原因でした。
今、create-expo-appでプロジェクトを作成すると、Expoバージョンが50になるようです。しかし、現在のExpo Goには対応していないようです。
まず、expoをアンインストールします。プロジェクトに移動し、
npx expo uninstall expo
とします。
次に、
npx expo install expo@49.0.0
とします。
一度実行するとエラーメッセージでますのでその通りにします。（慣れている人は
この後にこうすることは予想されたでしょう）
npx expo install --fix
これでできるようになりました。
さて、本題です。
① npx expo install react-native-reanimated としてインストール
②babel.config.jsを下記に書き換えます。なぜ書き換えるかについても上記HPに記載ありますがここではスルーします。
module.exports = function(api) {
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
③プロジェクトを開始するときは、
npx expo start -c とするようです。c はキャッシュでしょうか。
React Nativeを使用して、Androidアプリを作成する場合はこれだけでよいようです。
（そのほかについても上記HPに記載あります）
次に移ります。
react-native-reanimatedには、描画に関連する値（コンポーネントの縦・横の長さ他）は、共有値（SharedValue)として定義することになっているようです。すなわち、自分で、変数を定義して、useStateで登録というわけでなく、useSharedValueというHookを利用して、共有値（SharedValue)を定義します。
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, useAnimatedValue } from 'react-native';
import Animated from 'react-native-reanimated';
import { useSharedValue} from 'react-native-reanimated';
export default function App() {
const width = useSharedValue(100);
return (
<Animated.View
style={{
width: width,
height: 100,
backgroundColor: 'violet',
}}/>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
useSharedValueでは、キャッシュにその値が入るようで変更にもコツがいるようです。
次の項目に移動します。
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, useAnimatedValue } from 'react-native';
import Animated from 'react-native-reanimated';
import { useSharedValue} from 'react-native-reanimated';
export default function App() {
const width = useSharedValue(100);
const handlePress = () => {
}
return (
<View>
<Animated.View
style={{
width: width,
height: 100,
backgroundColor: 'violet',
}}/>
<Button
title='PUSH'
onPress={handlePress}/>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
⓵のように、上書きするようです。
