「React NativeとExpoで作るiOS・Androidアプリ開発入門 1/3」の感想・備忘録

posted with ヨメレバ

Amazonで見る

点数
感想
コンポーネント
1. ActivityIndicator
React Native標準API
1. Share
2. Dimensions
サンプルアプリの作成

点数

73点

感想

薄く広くといった感じで、React Nativeとはどんなものかという入り口としてはまずまずだと思う。

ActivityIndicator、Share、Dimensionsなどは参考になった。

コンポーネント

ActivityIndicator

読み込み中のアニメーションが表示される。

import {ActivityIndicator} from 'react-native'
〜省略〜
<ActivityIndicator/>

React Native標準API

「共有」を呼び出すことができる。

import {Button,Share} from 'react-native'
〜省略〜
<Button title="共有テスト" onPress={async ()=> await Share.share({
  title: 'ここにタイトルが入ります',
  message: 'ここに本文が入ります'
})}/>

Dimensions

画面サイズを取得することができる。

import {Dimensions} from 'react-native'
〜省略〜
<Text>width: {Dimensions.get('window').width}</Text>
<Text>height: {Dimensions.get('window').height}</Text>
<Text>scale: {Dimensions.get('window').scale}</Text>

サンプルアプリの作成

import { StatusBar } from 'expo-status-bar'
import {
  ActivityIndicator,
  Button,
  FlatList,
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native'
import { useEffect, useState } from 'react'

export default function App () {
  const [threads, setThreads] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  useEffect(() => {
    fetch('https://www.reddit.com/r/newsokur/hot.json').
    then(res => res.json()).
    then(json => {
      setThreads(json.data.children)
      setIsLoading(false)
    })
  })
  return (
    <View style={styles.container}>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList data={threads} renderItem={({ item }) => {
          return (
            <View style={{ flex: 1, flexDirection: 'row', paddingVertical: 10, borderBottomWidth: 1 }}>
              <Image source={{ uri: item.data.thumbnail }} width={70} height={70}/>
              <View style={{
                width: Dimensions.get('window').width -
                  90, marginHorizontal: 10,
              }}>
                <View style={{ flex: 1, flexDirection: 'column' }}>
                  <Text>{item.data.title}</Text>
                  <Text style={{ color: '#aaa' }}>{item.data.domain}</Text>
                </View>
              </View>
            </View>
          )
        }}/>
      )}
      <StatusBar style="auto"/>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})