푸딩 17일차

1. API 연동

• ChatListPage에서 props로 서버에서 받은 주소를 넘겨준다.
• 사용자의 닉네임, 주소는 잘 들어갔는데 이미지는 나오지 않았다..

pages/chatting/ChatListPage.js

  const [userInfo, setUserInfo] = useState([])

  async function apiTest() {
    try {
      const response = await axios.get('http://10.0.2.2:3333/user/all');
      const userData = response.data.result
      setUserInfo(userData)
    } catch (error) {
      return console.log(error)
    }
  }

  useEffect(() => {
    apiTest();
  }, [])

return(
  <ScrollView style={styles.listView}>
    { userInfo.map((data, index) => (
      <ChatCard key={data.id} navigation={navigation} userData={data} />
    ))}
  </ScrollView>
)

component/chatting/ChatCard.js

const { name, address, profileImg } = userData;

return (
  <TouchableOpacity style={styles.chatCard} onPress={() => navigation.navigate('ChattingPage')}>
    <Image source={profileImg} style={styles.userImage} />
    <View style={styles.chatContent}>
      <View style={styles.user}>
        <Text style={styles.userName}>{name}</Text>
        <Text style={styles.userArea}>{address}</Text>
      </View>
      <Text numberOfLines={1} style={styles.chatMessage}>안녕하세요~ </Text>
    </View>
  </TouchableOpacity>
  )

2. Image Error

• ChatListPage에서 ChatCard로 이미지 주소가 넘어올 때 uri주소로 넘어온다.
  • uri : ex) https://firebasestorage.googleapis.com/v0/b/todolist-4b0dc.appspot.com/o/retan.png?alt=media&token=9e2e8975-3fa4-4477-9d72-ec4522f0035a
• 이미지 태그에서 주소를 적어줄 때 {uri: 이미지 주소}로 작성하면 아래와 같이 사용자들의 프로필 사진이 잘 나온걸 볼 수 있다.

  <Image source={{ uri: profileImg }} style={styles.userImage} />

3. Navigation Data 전달

• 다른 페이지로 데이터를 전송해야 할 때에는 아래와 같이 객체로 작성하여 넘겨주면 다른 페이지에서도 데이터 사용이 가능하다.

  onPress={() => { navigation.navigate('ChattingPage', { userData }) }}