发现页样式逻辑

原本样式

需求样式

 

成型样式

 

 

 主要代码块：

 find文件夹

HomeScreen.js 中

更改

 

```

 return (

      <Screen header>

        <View style={styles.container}>

          <ScrollableTabView

            renderTabBar={props => (

              <TabBarHeader

                {...props}

                style={{ justifyContent: 'flex-start' }}

                width={120}

                tabUnderlineWidth={30}

                leftComponent

              />

            )}

          >

        

            <RecommendTab tabLabel="推荐" navigation={navigation} />  

            <FollowTab tabLabel="关注" navigation={navigation} />

          </ScrollableTabView>

        </View>

      </Screen>

    );

  }

```

完成

 

 

再分别

创建RecommendTab .js

```

  <FlatList

                data={items}

                keyExtractor={(item, index) => index.toString()}

                renderItem={({ item, index }) => {

                  return <PostItem post={item} recommend={false} />;

                }}

```

再在item中创建PostItem.js

```

 return (

    <TouchableHighlight

      style={{

        width: itemWidth,

        height: 300,

        marginLeft: 'auto',

        marginRight: 'auto',

        marginTop: 6

      }}

      onPress={() => Methods.goContentScreen(navigation, post)}

    >

      <View

        style={{

          backgroundColor: 'white',

          height: 160,

          width: itemWidth,

          flexDirection: 'column',

          justifyContent: 'space-between',

          alignItems: 'flex-start',

          flex: 1,

          borderWidth: 1,

          borderColor: '#f4f4f4',

          borderRadius: 12,

          overflow: 'hidden',

          paddingLeft: 5,

          paddingRight: 5

        }}

      >

        <View style={{ width: '100%', marginBottom: 12 }}>

          <Text

            style={{ fontSize: 15, fontWeight: '600', color: '#333' }}

            numberOfLines={1}

            ellipsizeMode={'tail'}

          >

            {title}

          </Text>

        </View>

        <Image

          source={{ uri: cover }}

          style={{ width: 280, height: 180, alignSelf: 'center' }}

          resizeMode={'cover'}

        />

        <View

          style={{

            flexDirection: 'row',

            justifyContent: 'flex-start',

            alignItems: 'center',

            marginTop: 12

          }}

        >

          {hits > 0 && (

            <Text style={styles.metaCount}>

              {hits || 0}

              次查看

            </Text>

          )}

          {count_likes > 0 && (

            <Text style={styles.metaCount}>

              {'· ' + count_likes || 0}

              人喜欢

            </Text>

          )}

          {count_replies > 0 && (

            <Text style={styles.metaCount}>

              {'· ' + count_replies || 0}

              条评论

            </Text>

          )}

        </View>

        <View style={{ marginTop: 6 }}>

          <Text

            style={{

              fontSize: 14,

              color: '#333',

              marginLeft: 6

            }}

          >

            {user.name}

          </Text>

        </View>

      </View>

    </TouchableHighlight>

  );

}

const styles = StyleSheet.create({

  metaCount: {

    fontSize: 13,

    color: Colors.lightFontColor,

    marginLeft: 3

  }

});

```

完成推荐部分的文章与图片布局

 

   

  FollowTab tabLabel.js

  

```

 render() {

    let { me: user, login } = store;

    let { navigation } = this.props;

    if (!login) {

      return <Empty navigation={navigation} />;

    }

```

再创建parts文件并再其下创建

Empty.js文件

```

 return (

        <BlankContent

          children={

            <View style={styles.row}>

              <Text

                style={{

                  fontSize: 16,

                  color: Colors.tintFontColor,

                  marginTop: 12

                }}

              >

                空空如也，快去

              </Text>

              <TouchableWithoutFeedback

                onPress={() => {

                  navigation.dispatch(

                    Methods.navigationAction({ routeName: "主页" })

                  );

                }}

                style={styles.findText}

              >

                <View style={styles.findButtom}>

                  <Text

                    style={{

                      fontSize: 16,

                      color: Colors.skinColor

                    }}

                  >

                    发现

                  </Text>

                </View>

              </TouchableWithoutFeedback>

              <Text

                style={{

                  fontSize: 16,

                  color: Colors.tintFontColor,

                  marginTop: 12

                }}

              >

                你感兴趣的人吧

              </Text>

            </View>

          }

        />

      );

    }

    return (

      <View style={styles.emptyWrap}>

        <View style={styles.divingWrap}>

          <Image

            source={require("../../../assets/images/cloud.png")}

            style={styles.cloud}

          />

        </View>

        <View>

          <Text style={styles.emptyText}>空空如也，快去关注你感兴趣的人吧</Text>

        </View>

        <View style={styles.buttonWrap}>

          <Button

            style={styles.button}

            name="发现有趣"

            handler={() => {

              navigation.dispatch(

                Methods.navigationAction({ routeName: "主页" })

              );

            }}

          />

        </View>

      </View>

    );

  }

```

呈现：

在编写的过程中

1.在js文件中需要使用到的其他的js文件必须有相应import

2.不能在仿照的过程中丢失一些引用的文件，未建立和编码

3.尝试做一些更改的时候，如果报错要学习怎么看报错信息

4.细心地参考别人代码，还有用心去读懂别人的代码再改

 反思：

1.代码的读懂方面缺失很好的逻辑

2.对一些基本组件的应用和语法不熟悉

3.缺失自我很好的学习能力

4.缺失合理的安排与细致

总：知识层面太薄弱，必须自我安排合理的实践，在实践中将理论知识学会应用起来

 

转载于:https://www.cnblogs.com/rsheng/p/11511622.html