Question

My Component的render（）方法是这样的：

if (this.props.loading) {
  return this.renderLoadingView();
}

return (
  <View style={[GlobalStyles.mainContainer, CategoryListingStyles.container]}>
    <ListView
      style={GlobalStyles.listView}
      dataSource={this.props.dataSource}
      enableEmptySections={true}
      renderRow={(c) => <CategoryListingItem category={c} onSelectCategory={this.selectCategory} />}
      renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={CategoryListingStyles.separator} />}
    />
  </View>
);

它显示了一个简单的列表，但是我想在右侧添加一个V形符号，以便用户更清楚地点击它会将用户带到下一个屏幕。

最好的方法是什么？图片？如果是的话，我该如何追加它，在哪里？据我所知，我不能在CSS中使用任何伪选择器。

Answer 1

模块react-native-vector-icons包含一个V形图标，以及许多其他图标。

安装：

npm install react-native-vector-icons --save
rnpm link

Font Awesome系列中的angle-right图标是一款优秀的iOS风格雪佛龙：

导入：

import Icon from 'react-native-vector-icons/FontAwesome';

在渲染方法中：

<Icon name="angle-right" size={24} color="#C8C7CC" />

Answer 2

如果您正在寻找分页滚动，最好在Android的情况下试用ViewPagerAndroid。您还可以查看组件react-native-swiper https://github.com/leecade/react-native-swiper

另外，为了回答你的问题，我最初的想法是在具有绝对定位的TouchabeView中添加一个图像，然后将onPress安装到ListView.scrollTo（）。不知道这是否是最佳方式。

的内容

<TouchableOpacity onPress={scrollFunction} style={{position:'absolute',right:0}}>
  <Image source={chevronIcon} />
</TouchableOpacity>

将chevron添加到列表视图项

2 个答案: