React Nativeでアプリ作ってみたよパート3

React Nativeでアプリ作ってみたよパート3

パート3は前回から2年ほどが経っております。前回のはJavaのコードを移したせいかなんか変なJSで、今エディターで見ると「.TSほにゃほにゃなエラー」の数がすごい。今回も元々はNuxt.jsでなんかやろ的なアプリで、Templateタグは使わないでRender関数で書きたかったんで〜、そんな感じで書いてるうちに、なんかこれってReactNativeでいいやん。というふうになって、そんなこんなで今に至ります。

公式に書いてあるUSAGEのほぼそのままで実装して、こんな雰囲気になっています。

app.js

export default function App() {
  return (
    <NavigationContainer>
      <Navi />
    </NavigationContainer>
  );
}

components/Navi.js

const Stack = createStackNavigator();

const Navi = () => (
  <Stack.Navigator
    screenOptions={{
      headerTitle: "近くで済ますアプリ"
    }}
  >
    <Stack.Screen
      options={{
        headerShown: false
      }}
      name="title"
      component={title}
    />
    <Stack.Screen name="menu" component={menu} />
    <Stack.Screen name="shop" component={shop} />
  </Stack.Navigator>
);

export default Navi;

タイトルは最近たまにやっているゲームアプリっぽ風に、TauchableOpacityを使って画面全体をタップしてメイン画面に遷移します。

components/title.js

export default function Title({ navigation }) {
  return (
    <TouchableOpacity
      style={{ flex: 1 }}
      onPress={() => navigation.navigate("menu")}
    >
      <View
        style={{
          backgroundColor: "lightyellow",
          flex: 1,
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <Image
          resizeMode="contain"
          style={{ width: 300, height: 58 }}
          source={require("../assets/title.png")}
        />
        <Text color="#841584">TAP TO START</Text>
      </View>
    </TouchableOpacity>
  );
}

components/menu.js

const getShops = keyword => {
  return api.getShops(keyword).then(res => {
    return res.data.results;
  });
};

const Menu = ({ navigation }) => {
  navigation.setOptions({
    headerRight: () => (
      <Button
        type="clear"
        onPress={() => setIsVisible(true)}
        title="Keyword"
        color="#fff"
      />
    )
  });
  const [shops, setShops] = useState([]);
  const [isVisible, setIsVisible] = useState(false);
  const [keyword, setKeyword] = useState("");

  const setKeywordSearch = keyword => {
    (async () => {
      api.getShops(keyword).then(res => {
        const data = res.data.results;
        setShops({
          data
        });
      });
    })();
    setIsVisible(false);
  };

  useEffect(() => {
    (async () => {
      const data = await getShops();
      await setShops({
        data
      });
    })();
  }, []);

  return (
    <ScrollView style={{ flex: 1 }}>
      <Overlay
        height="auto"
        isVisible={isVisible}
        onBackdropPress={() => setIsVisible(false)}
      >
        <View>
          <Text>検索に含ませたいキーワードがあれば入力してください。</Text>
          <TextInput
            style={{
              marginTop: 10,
              marginBottom: 10,
              height: 30,
              borderColor: "black",
              borderWidth: 1
            }}
            onChangeText={keyword => setKeyword(keyword)}
            value={keyword}
          />
          <Button
            type="clear"
            color="#009488"
            title="検索する"
            onPress={() => setKeywordSearch(keyword)}
          />
        </View>
      </Overlay>
      <View style={styles.container}>
        {shops.data &&
          shops.data.shop.map((data, i) => (
            <Card key={i}>
              <View style={{ width: 280, flex: 1 }}>
                <View style={{ flex: 1, flexDirection: "row" }}>
                  <View style={{ flex: 3, flexDirection: "column" }}>
                    <Text>{data.name}</Text>
                    <Text>{data.genre.name}</Text>
                  </View>
                  <View
                    style={{
                      flex: 2,
                      justifyContent: "flex-end",
                      alignItems: "flex-end"
                    }}
                  >
                    <TouchableOpacity
                      onPress={() =>
                        navigation.navigate("shop", {
                          Data: { shop: data.id }
                        })
                      }
                    >
                      <Image
                        style={{ width: 100, height: 100 }}
                        source={{ uri: data.photo.mobile.l }}
                      />
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
            </Card>
          ))}
      </View>
    </ScrollView>
  );
};
const styles = StyleSheet.create({});

export default Menu;

前回やったときはReactNativeがちょっと書き辛いように感じるところが多かったけどもいろいろと進歩したのかシンプルにまとめて書けるような気がしました。
お店の詳細画面のリスト表示のところだけゴチャっとしたのでStyleSheet.createで分けました。小さいものだとスタイルはまとめて書いちゃってサクッと書けてしまうのでサクッとやっちゃうんだな。これが。

components/Shop.js

const getDetail = id => {
  return api.detailGet(id).then(res => {
    return res.data.results;
  });
};

const ListView = ({ subtitle, data }) => {
  return (
    <View style={styles.container}>
      <View style={styles.subtitle}>
        <Text>{subtitle}</Text>
      </View>
      <View style={styles.information}>
        <Text>{data}</Text>
      </View>
    </View>
  );
};

const Shop = props => {
  const [shop, setShop] = useState([]);
  useEffect(() => {
    (async () => {
      const data = await getDetail(props.route.params.Data.shop);
      await setShop({ data });
    })();
  }, []);

  return (
    <ScrollView style={{ flex: 1 }}>
      {shop.data &&
        shop.data.shop.map((data, i) => (
          <Card key={i} title={data.name} image={{ uri: data.photo.mobile.l }}>
            <View style={{ flex: 1 }}>
              <ListView subtitle="住所" data={data.address} />
              <ListView subtitle="交通アクセス" data={data.access} />
              <ListView subtitle="営業時間" data={data.open} />
              <ListView subtitle="定休日" data={data.close} />
              <ListView
                subtitle="平均予算"
                data={data.budget && data.budget.average}
              />
              <ListView subtitle="備考" data={data.budget_memo} />
              <ListView subtitle="席数" data={data.capacity} />
              <ListView subtitle="メモ" data={data.shop_detail_memo} />
            </View>
          </Card>
        ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row"
  },
  subtitle: {
    flex: 2,
    padding: 10
  },
  information: {
    flex: 15,
    padding: 10
  }
});

export default Shop;