2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

React Nativeでアプリを作成してみた【Twitter clone】

Last updated at Posted at 2024-06-10

プロジェクトを作成する

① プロジェクトを作成する

npx create-expo-app@latest twitter_clone --template
Navigation(Typescript)

React Native でユーザー インターフェース (UI) を構築する

①assetsにdata/tweets.tsを作成する

assets/data/tweets.ts


②app/(tabs)/index.tsxを編集する

app/(tabs)/index.tsx


③componentsにTweet.tsxを作成する

components/Tweet.tsx


④app/type/index.tsxを作成する

app/type/index.tsx


アイコンボタンを作成する

①componentsにIconButton.tsxを作成する

components/IconButton.tsx


②appにtweetフォルダと[id].jsxを作成する

app/tweet/[id].jsx


③app/_layout.tsxを編集する

app/_layout.tsx


④app/new-tweet.tsxを編集する

app/new-tweet.tsx


⑤app/(drawer)/index.tsxを作成する

⑥app/(drawer)/twitter-blue.tsxを作成する

⑦app/(drawer)/bookmarks.tsxを作成する

⑧app/(drawer)/_layout.tsxを作成する

npm install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated

⑨app/(drawer)に(tabs)を移動する

⑩app/(drawer)/(tabs)/feedファイルを作成し、index.tsxを移動する

⑪app/(drawer)/(tabs)/feed/_layout.tsxを作成する

参考サイト

Building a Twitter Clone with React Native from Scratch

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?