创建 React Native WhatsApp 克隆移动应用程序
上次更新时间：2024-12-04
课程售价: 2.9 元
联系右侧微信客服充值或购买课程
课程内容
1. Introduction
- 1. Intro video (from course landing page) (免费)
- 3. What is Expo (免费)
- 4. Creating our project!
- 5. A quick rundown of the project structure
- 6. Where do I find the source code
- 7. Some useful VS Code extensions
- 8. Running the app on a real device
- 9. Running the app on an Android emulator
- 10. Running the app on an iOS emulator
2. React Native basics - quick overview
3. Fonts and splashscreens
4. Adding the navigation system
- 1. Installing React Navigation
- 2. Creating the stack navigator
- 3. Fixing the screen display
- 4. Navigating to a screen on button press
- 5. Configuring the navigation options
- 6. Adding bottom tabs
- 7. Configuring the titles of our navigators
- 8. Displaying icons on our bottom tabs
- 9. Separating our navigator into its own file
- 10. Separating the 'logged in' navigator
5. Chat screen UI
- 1. Creating the chat screen
- 2. Setting the background image
- 3. Handling the chat safe area
- 4. Buttons with icons
- 5. Styling the textbox and buttons
- 6. Showing a send button as the user types
- 7. Styling the send button
- 8. Handing a message being submitted
- 9. Fixing the textbox being hidden behind the keyboard
6. Sign up screen
- 1. Creating the sign up screen
- 2. Adding a page container component
- 3. Creating a custom input component
- 4. Adding an icon to the input
- 5. Styling the label
- 6. Styling the textbox
- 7. Displaying error text
- 8. Creating a custom submit button
- 9. Submit button title, onPress and remaining style
- 10. Switching between sign up and sign in forms
- 11. Setting the form image
- 12. Prevent keyboard from hiding the form
7. Form validation
- 1. Handling text changed
- 2. Validation demo
- 3. First name and last name validation
- 4. Refactoring the validation functionality
- 5. Improving the return value
- 6. Validating emails and passwords
- 7. Improving our textboxes
- 8. Validating the sign in form values
- 9. Managing form state with useReducer
- 10. Evaluating the whole form's validity
- 11. Evaluating the whole sign in form validity
- 12. Displaying the error messages
8. Creating the user's account (signing up)
- 1. Getting the form values
- 2. Creating our Firebase project
- 3. Firebase helper file
- 4. Authenticating a user with Firebase
- 5. Handing 'email already in use' errors
- 6. Displaying errors
- 7. Adding a loading spinner
- 8. Sending user data to the database
- 9. Using Redux toolkit to manage app state
- 10. Configuring out auth slice
- 11. Saving auth info to the state
- 12. Accessing data from the state
- 13. Going to the main page when they sign up
- 14. Saving sign in data to storage
- 15. Creating the start up screen
- 16. Handling when storage is empty
- 17. Handling an expired token
- 18. Auto logging in if a token exists
- 19. Clearing the storage - forcing the log out
- 20. Signing in
- 21. Handling sign in errors
- 22. Fixing error Can't perform a React state update on an unmounted component
- 23. Logout timer
- 24. Loading spinner for the sign in form
- 25. 'test mode' for quick sign in
9. Settings page
- 1. Adding a custom page title element
- 2. Fixing the margin of the settings page
- 3. Adding the input fields
- 4. Setting the initial values of the input fields
- 5. Adding the save button
- 6. Updating the user in the database
- 7. Logout button
- 8. Updating the state with the new data
- 9. Hiding the submit button when there are no changes
- 10. Outputting the default user profile image
- 11. Styling the user image
- 12. Adding an 'edit' icon
- 13. Requesting permission to access the user's images
- 14. Opening the image picker
- 15. Updating the page to show the new image
- 16. Getting the image blob data
- 17. Uploading images using Firebase Storage
- 18. Saving the uploaded image to the user's database data
- 19. Updating the state data with the new profile picture
- 20. Image upload loading spinner
10. Searching for users to chat with
- 1. Adding the 'create chat' header button
- 2. Opening the new chat page
- 3. Creating our user search box
- 4. Showing a message when no results were found
- 5. Searching after the user stops typing
- 6. Searching for users
- 7. Outputting search results
- 8. Adding fake users
- 9. Creating our search result component
- 10. Styling the search results
- 11. Hiding the profile image edit button
11. Creating a new chat
12. Retrieving chats
- 1. Getting the user chats when the app starts
- 2. Unsubscribing the firebase listeners
- 3. Getting the data for each of the user's chats
- 4. Saving the chat data to state
- 5. Showing a loading spinner while we load the chats
- 6. Iterating the chat list
- 7. Setting the stored users on login
- 8. Outputting the user data
- 9. Navigating to the chats on press
13. Sending messages
14. Outputting chat messages
15. Message context menu (additional message actions)
16. Starring messages
- 1. Calling the star message function
- 2. Adding starred messages to the database
- 3. Adding and removing starred messages in the app state
- 4. Setting the initial starred messages state
- 5. Updating the menu option for star and unstar
- 6. Showing a star icon next to the message
- 7. Outputting the date next to the message
17. Replying to messages
18. Sending image messages
19. Creating group chats
- 1. Creating a 'new group' button
- 2. Creating the chat name textbox
- 3. Adding the 'create' button
- 4. Creating the user checkboxes
- 5. Selecting users for our group chat
- 6. Outputting the selected users
- 7. Removing a selected user when pressed
- 8. Styling the selected users list items
- 9. Scrolling the selected users list to the end
- 10. Handing the 'create' button press
- 11. Opening an existing chat if one with that user exists
- 12. [Bug fix] Fixing space at bottom of screen when on a new chat
- 13. Some small UI updates when it's a group chat
- 14. Outputting the sender name when it's a group chat
20. Chat user settings page
21. Chat settings page
- 1. Navigating to the chat settings page
- 2. Changing the group chat image
- 3. Using the chat image elsewhere
- 4. Creating the form handler for updating the chat name
- 5. Updating the chat name
- 6. Showing a success message when the name is updated
- 7. Creating a section for displaying the chat users
- 8. Outputting chat users
22. Removing users from chats
- 1. Showing the remove from chat button
- 2. Showing a loading spinner while a user is bring removed
- 3. Removing the user from the chat in the database
- 4. Removing the chat from the user's chat list
- 5. Sending info message 'User A removed User B from the chat'
- 6. Styling the info messages
- 7. Leaving chats
- 8. Bug fix Prevent remove from chat button showing when not in group chat
23. Viewing all chat users on a separate page
24. Adding new users to a chat
- 1. Excluding existing participants from search results
- 2. Updating the UI if we're adding users to an existing chat
- 3. Passing the selected users to the previous screen
- 4. Adding the chat to the user's chat list
- 5. Saving new users in the chat data
- 6. Sending a confirmation message when a user has been added
25. Viewing starred messages
26. Sending push notifications
- 1. Configuring the app for push notifications
- 2. Sending test push notifications
- 3. Storing the device push tokens on sign in
- 4. Removing push tokens on logout
- 5. Bug fix Can't logout when auth token has expired
- 6. Sending push notifications when a message is sent
- 7. Sending push notifications when an image is sent
- 8. Handing the notification click event
课程内容
26个章节 , 225个讲座
1. Introduction
- 1. Intro video (from course landing page) (免费)
- 3. What is Expo (免费)
- 4. Creating our project!
- 5. A quick rundown of the project structure
- 6. Where do I find the source code
- 7. Some useful VS Code extensions
- 8. Running the app on a real device
- 9. Running the app on an Android emulator
- 10. Running the app on an iOS emulator
2. React Native basics - quick overview
3. Fonts and splashscreens
4. Adding the navigation system
- 1. Installing React Navigation
- 2. Creating the stack navigator
- 3. Fixing the screen display
- 4. Navigating to a screen on button press
- 5. Configuring the navigation options
- 6. Adding bottom tabs
- 7. Configuring the titles of our navigators
- 8. Displaying icons on our bottom tabs
- 9. Separating our navigator into its own file
- 10. Separating the 'logged in' navigator
5. Chat screen UI
- 1. Creating the chat screen
- 2. Setting the background image
- 3. Handling the chat safe area
- 4. Buttons with icons
- 5. Styling the textbox and buttons
- 6. Showing a send button as the user types
- 7. Styling the send button
- 8. Handing a message being submitted
- 9. Fixing the textbox being hidden behind the keyboard
6. Sign up screen
- 1. Creating the sign up screen
- 2. Adding a page container component
- 3. Creating a custom input component
- 4. Adding an icon to the input
- 5. Styling the label
- 6. Styling the textbox
- 7. Displaying error text
- 8. Creating a custom submit button
- 9. Submit button title, onPress and remaining style
- 10. Switching between sign up and sign in forms
- 11. Setting the form image
- 12. Prevent keyboard from hiding the form
7. Form validation
- 1. Handling text changed
- 2. Validation demo
- 3. First name and last name validation
- 4. Refactoring the validation functionality
- 5. Improving the return value
- 6. Validating emails and passwords
- 7. Improving our textboxes
- 8. Validating the sign in form values
- 9. Managing form state with useReducer
- 10. Evaluating the whole form's validity
- 11. Evaluating the whole sign in form validity
- 12. Displaying the error messages
8. Creating the user's account (signing up)
- 1. Getting the form values
- 2. Creating our Firebase project
- 3. Firebase helper file
- 4. Authenticating a user with Firebase
- 5. Handing 'email already in use' errors
- 6. Displaying errors
- 7. Adding a loading spinner
- 8. Sending user data to the database
- 9. Using Redux toolkit to manage app state
- 10. Configuring out auth slice
- 11. Saving auth info to the state
- 12. Accessing data from the state
- 13. Going to the main page when they sign up
- 14. Saving sign in data to storage
- 15. Creating the start up screen
- 16. Handling when storage is empty
- 17. Handling an expired token
- 18. Auto logging in if a token exists
- 19. Clearing the storage - forcing the log out
- 20. Signing in
- 21. Handling sign in errors
- 22. Fixing error Can't perform a React state update on an unmounted component
- 23. Logout timer
- 24. Loading spinner for the sign in form
- 25. 'test mode' for quick sign in
9. Settings page
- 1. Adding a custom page title element
- 2. Fixing the margin of the settings page
- 3. Adding the input fields
- 4. Setting the initial values of the input fields
- 5. Adding the save button
- 6. Updating the user in the database
- 7. Logout button
- 8. Updating the state with the new data
- 9. Hiding the submit button when there are no changes
- 10. Outputting the default user profile image
- 11. Styling the user image
- 12. Adding an 'edit' icon
- 13. Requesting permission to access the user's images
- 14. Opening the image picker
- 15. Updating the page to show the new image
- 16. Getting the image blob data
- 17. Uploading images using Firebase Storage
- 18. Saving the uploaded image to the user's database data
- 19. Updating the state data with the new profile picture
- 20. Image upload loading spinner
10. Searching for users to chat with
- 1. Adding the 'create chat' header button
- 2. Opening the new chat page
- 3. Creating our user search box
- 4. Showing a message when no results were found
- 5. Searching after the user stops typing
- 6. Searching for users
- 7. Outputting search results
- 8. Adding fake users
- 9. Creating our search result component
- 10. Styling the search results
- 11. Hiding the profile image edit button
11. Creating a new chat
12. Retrieving chats
- 1. Getting the user chats when the app starts
- 2. Unsubscribing the firebase listeners
- 3. Getting the data for each of the user's chats
- 4. Saving the chat data to state
- 5. Showing a loading spinner while we load the chats
- 6. Iterating the chat list
- 7. Setting the stored users on login
- 8. Outputting the user data
- 9. Navigating to the chats on press
13. Sending messages
14. Outputting chat messages
15. Message context menu (additional message actions)
16. Starring messages
- 1. Calling the star message function
- 2. Adding starred messages to the database
- 3. Adding and removing starred messages in the app state
- 4. Setting the initial starred messages state
- 5. Updating the menu option for star and unstar
- 6. Showing a star icon next to the message
- 7. Outputting the date next to the message
17. Replying to messages
18. Sending image messages
19. Creating group chats
- 1. Creating a 'new group' button
- 2. Creating the chat name textbox
- 3. Adding the 'create' button
- 4. Creating the user checkboxes
- 5. Selecting users for our group chat
- 6. Outputting the selected users
- 7. Removing a selected user when pressed
- 8. Styling the selected users list items
- 9. Scrolling the selected users list to the end
- 10. Handing the 'create' button press
- 11. Opening an existing chat if one with that user exists
- 12. [Bug fix] Fixing space at bottom of screen when on a new chat
- 13. Some small UI updates when it's a group chat
- 14. Outputting the sender name when it's a group chat
20. Chat user settings page
21. Chat settings page
- 1. Navigating to the chat settings page
- 2. Changing the group chat image
- 3. Using the chat image elsewhere
- 4. Creating the form handler for updating the chat name
- 5. Updating the chat name
- 6. Showing a success message when the name is updated
- 7. Creating a section for displaying the chat users
- 8. Outputting chat users
22. Removing users from chats
- 1. Showing the remove from chat button
- 2. Showing a loading spinner while a user is bring removed
- 3. Removing the user from the chat in the database
- 4. Removing the chat from the user's chat list
- 5. Sending info message 'User A removed User B from the chat'
- 6. Styling the info messages
- 7. Leaving chats
- 8. Bug fix Prevent remove from chat button showing when not in group chat
23. Viewing all chat users on a separate page
24. Adding new users to a chat
- 1. Excluding existing participants from search results
- 2. Updating the UI if we're adding users to an existing chat
- 3. Passing the selected users to the previous screen
- 4. Adding the chat to the user's chat list
- 5. Saving new users in the chat data
- 6. Sending a confirmation message when a user has been added
25. Viewing starred messages
26. Sending push notifications
- 1. Configuring the app for push notifications
- 2. Sending test push notifications
- 3. Storing the device push tokens on sign in
- 4. Removing push tokens on logout
- 5. Bug fix Can't logout when auth token has expired
- 6. Sending push notifications when a message is sent
- 7. Sending push notifications when an image is sent
- 8. Handing the notification click event