まず、react-native-draglistライブラリを利用し、ドラッグできるリストを作成してみました。
import { useState, useEffect } from "react";
import {
View,
Text,
TextInput,
Button,
FlatList,
TouchableOpacity,
} from "react-native";
import DragList, { DragListRenderItemInfo } from "react-native-draglist";
function DraggableLyrics({ dataArray, emitDataArray, navigation }) {
function keyExtractor(str) {
return str;
}
function renderItem(info) {
const { item, onDragStart, onDragEnd, isActive } = info;
return (
<View
style={{
flexDirection: "row",
justifyContent: "space-around",
borderWidth: 1,
}}
>
<TouchableOpacity
key={item}
onPressIn={onDragStart}
onPressOut={onDragEnd}
>
<Text style={{ fontSize: 30 }}>{item}</Text>
</TouchableOpacity>
</View>
);
}
async function onReordered(fromIndex, toIndex) {
const copy = [...dataArray]; // Don't modify react data in-place
const removed = copy.splice(fromIndex, 1);
copy.splice(toIndex, 0, removed[0]); // Now insert at the new pos
emitDataArray(copy);
console.log(copy);
}
return (
<View>
<DragList
data={dataArray}
keyExtractor={keyExtractor}
onReordered={onReordered}
renderItem={renderItem}
/>
</View>
);
}
export default function ListScreen({ navigation }) {
const [dataArray, setDataArray] = useState();
useEffect(() => {
setDataArray(["aaa", "bbb", "ccc"]);
}, );
return (
<View style={{ marginTop: 10 }}>
<DraggableLyrics
dataArray={dataArray}
emitDataArray={setDataArray}
navigation={navigation}
/>
</View>
);
}
ドラッグして順番を変えるとコンソールに下記のように表示されます。
["bbb", "ccc", "aaa"]
これをAsyncStorageに保存する。
（AsyncStorageへの保存の仕方については下記。
AsyncStorageへの保存の復習＋『配列と、配列のコードの文字列との変換』 - JavaScriptからReactまで (hatenablog.com)）
（配列とその配列のコードの文字列との変換についても下記。
AsyncStorageへの保存の復習＋『配列と、配列のコードの文字列との変換』 - JavaScriptからReactまで (hatenablog.com)）
別のFlatListScreen.jsを作成し、そこで、その保存したものを取り出し、その配列のコードの文字列を配列へ変換して、その順番で表示するようにする。もし、そのデータがないのであれば、生データの順番で表示する。
新しい要素が配列に追加された場合も考慮すると、配列要素数が同じかどうかも調べる必要があることに気づく。
→要素数が同じで、AsyncStorageに登録されたものがあるなら、それを表示。
要素数が異なるなら、AsyncStorageに登録があってもそれを使わず、生データを表示。
要素数が同じでも、AsyncStorageにデータがないなら、生データを表示
