解答喔

List.js

@@ -2,15 +2,13 @@ import React, { Component } from 'react';
 import {
   FlatList,
   View,
-  Text,
 } from 'react-native';
 import ListItem from './ListItem';
 
 export default class List extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      // 預設載入
       isRefreshing: true,
       data: [],
       page: 0
@@ -22,30 +20,36 @@ export default class List extends Component {
     await this.getData(0)
   }
 
-  // 整理資料
+  // 整理資料讓 ListItem 能使用
   format = (array) => {
     return array.map((data) => {
       return {
-        // 整理資料格式符合 ListItem props
+        title: data.name,
+        desc: data.job_title,
+        image: data.avatar,
       }
     })
   }
 
   getData = async(page) => {
     try {
       // 這裡要記得改成自己電腦的 IP
-      const IP ='192.168.2.101';
+      const IP ='192.168.57.1';
       // 可以使用的 API
       // http://${IP}:1337/pokemons/1
       // http://${IP}:1337/users/1
       let response = await fetch(`http://${IP}:1337/users?_page=${page}&_limit=10`);
       let responseJson = await response.json();
-      console.log('responseJson', responseJson);
       const data = this.format(responseJson);
       if (page === 0) {
-        // 第一筆資料，記得關掉 loading
+        this.setState({
+          isRefreshing: false,
+          data,
+        });
       } else {
-        // 滾動加載更新資料
+        this.setState({
+          data: [...this.state.data, ...data],
+        });
       }
       return responseJson;
     } catch (e) {
@@ -56,25 +60,25 @@ export default class List extends Component {
   render() {
     return (
       <FlatList
-        data={
-          // 資料
-          [{ title: 'title'  }, { title: 'title2'  },{ title: 'title3'  }]
-        }
-        renderItem={({item}) => {
-          // return 剛剛實作的 ListItem
-          return <Text>{item.title}</Text>
-        }}
+        data={this.state.data}
+        renderItem={({item}) => <ListItem {...item}/>}
         onEndReached={() => {
-          // 滑到底部的時候加載新資料
+          this.setState({
+            page: this.state.page + 1
+          }, () => {
+            this.getData(this.state.page)
+          })
         }}
         refreshing={this.state.isRefreshing}
         onRefresh={() => {
-          // 下拉刷新
-        }}
-        ItemSeparatorComponent={({highlighted}) => {
-          // return 簡單的分隔線
-          return null;
+          this.setState({
+            isRefreshing: true
+          });
+          this.getData(0);
         }}
+        ItemSeparatorComponent={
+          ({highlighted}) => <View style={{ height: 1, backgroundColor: '#000'  }} />
+        }
       />
     );
   }

ListItem.js

@@ -3,48 +3,55 @@ import {
   View,
   StyleSheet,
   Text,
-  Image,
-  TouchableOpacity,
+  Image
 } from 'react-native';
 
 export default class ListItem extends Component {
   static propTypes = {
     title: PropTypes.string,
     desc: PropTypes.string,
     image: PropTypes.string,
-    onPress: PropTypes.func,
   }
   static defaultProps = {
     title: '標題',
     desc: '內容',
     image: 'https://robohash.org/eaetin.png?size=150x150&set=set1',
-    onPress: () => {},
-   }
+  }
   constructor(props) {
     super(props);
   }
-  
+
   render() {
     return (
-      <TouchableOpacity style={styles.container} onPress={this.props.onPress}>
+      <View style={{ flexDirection: 'row', height: 100, padding: 10, backgroundColor: '#eee' }}>
+       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Image
-          style={{ height: 80, width: 80 }}
+          style={{ height: 80, width: 80, borderRadius: 40, borderWidth: 2, borderColor: '#bbb' }}
           source={{ uri: this.props.image }}
         />
-        <Text>
-          {this.props.title}
-        </Text>
-      </TouchableOpacity>
+       </View>
+       <View style={{
+          flex: 3,
+          justifyContent: 'center',
+          marginLeft: 20,
+       }}
+       >
+          <Text style={{ fontSize: 20, fontWeight: '500'  }}>
+            {this.props.title}
+          </Text>
+          <Text>
+            {this.props.desc}
+          </Text>
+       </View>
+      </View>
     );
   }
 }
 
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    height: 100,
-    padding: 10,
-    backgroundColor: '#eee',
+    flex: 1,
+    padding: 30,
   },
 })

index.android.js

@@ -26,7 +26,7 @@ import List from './List';
 export default class sample1 extends Component {
   render() {
     return (
-      <ViewSample />
+      <List />
     );
   }
 }

sample/fetch/index.js

@@ -21,7 +21,7 @@ export default class FetchSample extends Component {
   getData = async(page) => {
     try {
       // 這裡要記得改成自己電腦的 IP
-      const IP ='192.168.2.101';
+      const IP ='192.168.57.1';
       let response = await fetch(`http://${IP}:1337/users/1`);
       let responseJson = await response.json();
       console.log(responseJson);