Javascript 使用react-native查看列表中的项目

我的第一个react原生应用程序列出了印度的流行广告，并在网页上显示了该商品的详细信息

打印项目的代码部分如下所示

Linking.openURL（item.url）}>{item.title}
}
keyExtractor={（项，索引）=>index}
/>

我想学习如何使列表中的项目看起来更好。该项目的web版本具有以下列表外观

我怎样才能使这些项目看起来更吸引人，更像我的网页外观，并清楚地显示这些项目是可点击的

import _ from 'lodash';

import Expo from 'expo';
import React, { Component } from 'react';
import {FlatList, ActivityIndicator,
  View,
  ScrollView,
  StyleSheet,
  Image,
  TouchableHighlight,
  ListView,Linking
} from 'react-native';

import {
  Text,
  Card,
  ButtonGroup,
  Tile,
  Col,
  Row,
  Icon,
  List,
  ListItem,
  Avatar
} from 'react-native-elements';

import colors from 'HSColors';

const users = [
  {
    name: 'brynn',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
  },
  {
    name: 'thot leader',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg',
  },
  {
    name: 'jsa',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg',
  },
  {
    name: 'talhaconcepts',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg',
  },
  {
    name: 'andy vitale',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/andyvitale/128.jpg',
  },
  {
    name: 'katy friedson',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
  },
];

const log = () => console.log('this is an example method');

const list1 = [
  {
    title: 'Appointments',
    icon: 'av-timer',
  },
  {
    title: 'Trips',
    icon: 'flight-takeoff',
  },
  {
    title: 'Passwords',
    icon: 'fingerprint',
  },
  {
    title: 'Pitches',
    icon: 'lightbulb-outline',
  },
  {
    title: 'Updates',
    icon: 'track-changes',
  },
];

const list2 = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President',
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman',
  },
  {
    name: 'Amanda Martin',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
    subtitle: 'CEO',
  },
  {
    name: 'Christy Thomas',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
    subtitle: 'Lead Developer',
  },
  {
    name: 'Melissa Jones',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
    subtitle: 'CTO',
  },
];

const list3 = [
  {
    image_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    icon: null,
    title: null,
  },
  {
    image_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    icon: null,
    title: null,
  },
  {
    image_url: null,
    icon: null,
    title: 'LR',
  },
  {
    image_url: null,
    icon: {name: 'user', type: 'font-awesome'},
    title: null,
  },
  {
    image_url: null,
    icon: {name: 'user-female', type: 'simple-line-icon'},
    title: null,
  },
  {
    image_url: null,
    icon: {name: 'baidu', type: 'entypo'},
    title: null,
  },
]

class Icons extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });

    this.state = {
      selectedIndex: 0,
      value: 0.5,
      dataSource: ds.cloneWithRows(list1),
        isLoading: true
    };

    this.updateIndex = this.updateIndex.bind(this);
    this.renderRow = this.renderRow.bind(this);
  }

  updateIndex(selectedIndex) {
    this.setState({ selectedIndex });
  }

  renderRow(rowData, sectionID) {
    return (
      <ListItem
        key={sectionID}
        onPress={log}
        title={rowData.title}
        icon={{ name: rowData.icon }}
      />
    );
  }
    componentDidMount(){
        return fetch('https://www.koolbusiness.com/in.json')
            .then((response) => response.json())
            .then((responseJson) => {

                this.setState({
                    isLoading: false,
                    dataSource: responseJson.movies,
                }, function(){

                });

            })
            .catch((error) =>{
                console.error(error);
            });
    }
  render() {
      if(this.state.isLoading){
          return(
              <View style={{flex: 1, padding: 20}}>
                  <ActivityIndicator/>
              </View>
          )
      }
    const { navigation } = this.props;
    const buttons = ['Button1', 'Button2'];
    const { selectedIndex } = this.state;
      if(this.state.isLoading){
          return(
              <View style={{flex: 1, padding: 20}}>
                  <ActivityIndicator/>
              </View>
          )
      }
    return (
      <ScrollView>
        <View style={styles.headerContainer}>
          <Icon color="white" name="invert-colors" size={62} />
          <Text style={styles.heading}>Trending Ads India</Text>
        </View>
          <View style={styles.MainContainer}>


          </View>
          <View style={{flex: 1, paddingTop:20}}>
              <FlatList
                  data={this.state.dataSource}
                  renderItem={({item}) =>      <Text style={styles.TextStyle} onPress={ ()=> Linking.openURL(item.url) } >{item.title}</Text>
                  }
                  keyExtractor={(item, index) => index}
              />
          </View>

      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 40,
    backgroundColor: '#FD6B78'
  },
  heading: {
    color: 'white',
    marginTop: 10,
    fontSize: 22,
  },
  fonts: {
    marginBottom: 8,
  },
  user: {
    flexDirection: 'row',
    marginBottom: 6,
  },
  image: {
    width: 30,
    height: 30,
    marginRight: 10,
  },
  name: {
    fontSize: 16,
    marginTop: 5,
  },
  social: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  subtitleView: {
    flexDirection: 'row',
    paddingLeft: 10,
    paddingTop: 5,
  },
  ratingImage: {
    height: 19.21,
    width: 100,
  },
  ratingText: {
    paddingLeft: 10,
    color: 'grey',
  },
});

export default Icons;

从“lodash”导入； 从“世博会”导入世博会； 从“React”导入React，{Component}； 导入{FlatList，ActivityIndicator， 看法 滚动视图， 样式表， 形象,， 触控高光， 列表视图，链接 }从“反应本机”； 进口{ 文本， 卡片 按钮组， 瓦片 上校， 一行 偶像 列表 列表项， 阿凡达 }从“反应本地元素”； 从“HSColors”导入颜色； 常量用户=[ { 名称：'brynn'， 阿凡达：'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', }, { 名称：“thot leader”， 阿凡达：'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg', }, { 名称：“jsa”， 阿凡达：'https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg', }, { 名称：“talhaconcepts”， 阿凡达：'https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg', }, { 姓名：“安迪·维塔莱”， 阿凡达：'https://s3.amazonaws.com/uifaces/faces/twitter/andyvitale/128.jpg', }, { 姓名：“凯蒂·弗里德森”， 阿凡达：'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg', }, ]; const log=（）=>console.log（'这是一个示例方法'）； 常数列表1=[ { 标题:"委任",， 图标：“av定时器”， }, { 标题:"旅行",， 图标：“飞行起飞”， }, { 标题：“密码”， 图标：“指纹”， }, { 标题:"投球",， 图标：“灯泡轮廓”， }, { 标题：“更新”， 图标：“跟踪更改”， }, ]; 常数列表2=[ { 姓名：“艾米·法哈”， 头像url:'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg', 副标题:"副总统",， }, { 姓名：'克里斯·杰克逊'， 头像url:'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg', 副标题:"副主席",， }, { 姓名：“阿曼达·马丁”， 头像url:'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', 副标题:"CEO",， }, { 姓名：“克里斯蒂·托马斯”， 头像url:'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg', 副标题：“首席开发人员”， }, { 姓名：“梅丽莎·琼斯”， 头像url:'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg', 副标题:"首席技术官",， }, ]; 常数列表3=[ { 图像\u url:'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg', 图标：空， 标题：空， }, { 图像\u url:'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg', 图标：空， 标题：空， }, { 图像url:null， 图标：空， 标题：“LR”， }, { 图像url:null， 图标：{name:'user'，键入：'font-awesome'}， 标题：空， }, { 图像url:null， 图标：{name:'user female'，键入：'simple line icon'}， 标题：空， }, { 图像url:null， 图标：{name:'baidu'，键入：'entypo'}， 标题：空， }, ] 类图标扩展组件{ 构造函数（）{ 超级（）； const ds=new ListView.DataSource({ 行已更改：（r1，r2）=>r1！==r2， }); 此.state={ 已选择索引：0， 数值：0.5， 数据源：ds.cloneWithRows（列表1）， 孤岛加载：正确 }; this.updateIndex=this.updateIndex.bind（this）； this.renderRow=this.renderRow.bind（this）； } 更新索引（已选择索引）{ this.setState（{selectedIndex}）； } renderRow（行数据，节ID）{ 返回( ); } componentDidMount（）{ 返回获取（'https://www.koolbusiness.com/in.json') .then（（response）=>response.json（）） .然后（（responseJson）=>{ 这是我的国家({ 孤岛加载：false， 数据来源：responseJson.movies， }，函数（）{ }); }) .catch（（错误）=>{ 控制台错误（error）； }); } render（）{ if（此.state.isLoading）{ 返回( ) } const{navigation}=this.props； 常量按钮=['Button1'，'Button2']； const{selectedIndex}=this.state； if（此.state.isLoading）{ 返回( ) } 返回( 印度流行广告 Linking.openURL（item.url）}>{item.title} } keyExtractor={（项，索引）=>index} /> ); } } const styles=StyleSheet.create({ 容器：{ 弹性：1， }, 负责人：{ 为内容辩护：“中心”， 对齐项目：“居中”， 填充：40， 背景颜色：“#FD6B78” }, 标题：{ 颜色：'白色'， 玛金托普：10， 尺寸：22， }, 字体：{ marginBottom:8， }, 用户：{ flexDirection:'行'， marginBottom:6， }, 图片：{ 宽度：30， 身高：30， marginRight:10， }, 姓名：{ 尺寸：16， 玛金托普：5， }, 社会：{ flexDirection:'行'， 为内容辩护：“中心”， }, 字幕视图：{ flexDirection:'行'， paddingLeft:10， paddingTop:5， }, 评级图像：{ 身高：19.21， 宽度：100， }, 评级文本：{ paddingLeft:10， 颜色：“灰色”， }, }); 导出默认值I

<View style={styles.mainWrapper} >
            <FlatList data={this.state.data} renderItem={this._renderList} />

        </View>

_renderList = ({ item }) => {
    return (
        <TouchableWithoutFeedback onPress={(event) => this._selectedItem(item.key)}>
            <View style={styles.listRowContainer}>
                <View style={styles.listinside1Container}>
                    <Image style={styles.listImage} source={item.icon} />
                    <View style={styles.listContainer} onPress={(event) => this._selectedItem(item.text)}  >
                        <Text style={styles.listHeader} >{item.header}</Text>
                        <Text style={styles.listValue} >{item.value}</Text>
                    </View>
                </View>
                <Image style={styles.listimgArrow} source={require('../../../resources/toolbar/chevron_right_grey.png')} />
            </View>
        </TouchableWithoutFeedback>
    );

}