Question

学习ReactNative并尝试使用ListView创建一个简单的时间轴，尝试了不同的设置，但无法使用ListView滚动。只是试过iOS不确定它是否适用于Android，下面是完整的代码...

任何帮助将不胜感激！

import React, { Component } from 'react';
import { StyleSheet, View, ListView, Image, Text, TouchableHighlight, Dimensions } from 'react-native';

import data from './data.json';

const profileImage = require('./images/profile.jpg');
const backgroundImage = require('./images/background.jpg');
const heartImage = require('./images/plain-heart.png');

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

  this.state = {
       dataSource: ds.cloneWithRows(data),
  };
}

renderRow(record) {
return(
  <View style = {styles.postContainer}>
    <View style = {styles.row}>
      <View style = {styles.iconContainer}>
        <Image source = {profileImage} style = {styles.icon} />
      </View>
      <View style = {styles.info}>
        <Text style = {styles.userName}>{record.name}</Text>
      </View>
    </View>
    <Image source = {backgroundImage} style = {styles.backgroundImage}>
      <Text style = {styles.quote}>{record.text}</Text>
    </Image>
    <View style = {styles.row}>
      <View style = {styles.likeIconContainer}>
        <Image source = {heartImage} style = {styles.like} />
      </View>
      <View style = {styles.likeInfo}>
        <Text style = {styles.likeText}>{record.likes} likes</Text>
      </View>
    </View>
  </View>
  );
 }

render() {
return (
  <View style = { styles.container }>
    <Text style = {  styles.pageTitle } > Timeline </Text >
    <ListView
        dataSource = {this.state.dataSource}
        renderRow = {this.renderRow}
    />
  </View >
 );
 }
}

const styles = StyleSheet.create({
 container:{
 flex:1,
 backgroundColor:'#fff'
},
pageTitle:{
 backgroundColor: '#0f1b29',
 color: '#fff',
 fontSize: 18,
 fontWeight: 'bold',
 padding: 10,
 paddingTop: 40,
 textAlign: 'center',
},
postContainer:{
 backgroundColor:'#fff'
},
row:{
 borderColor: '#f1f1f1',
 borderBottomWidth: 1,
 flexDirection: 'row',
 marginLeft: 10,
 marginRight: 10,
 paddingTop: 20,
 paddingBottom: 20,
},
iconContainer:{
 alignItems: 'center',
 backgroundColor: '#feb401',
 borderColor: '#feaf12',
 borderRadius: 25,
 borderWidth: 1,
 justifyContent: 'center',
 height: 50,
 width: 50,
},
icon:{
 height: 22,
 width: 22,
},
info:{
 flex: 1,
 paddingLeft: 25,
 paddingRight: 25,
},
userName:{
 fontWeight: 'bold',
 fontSize: 16,
 marginBottom: 5,
},
backgroundImage:{
 height: 250,
 width:width
},
quote:{
 position: 'absolute',
 fontSize:24,
 fontWeight:'bold',
 color: '#fff',
 backgroundColor: 'rgba(0,0,0,0)',
 borderRadius: 5,
 height: 250,
 padding: 25,
 top: 30,
 right: 10,
 left: 10
},
likeIconContainer:{
 alignItems: 'center',
 backgroundColor: '#feb401',
 borderColor: '#feaf12',
 borderRadius: 25,
 borderWidth: 1,
 justifyContent: 'center',
 height: 50,
 width: 50,
},
like:{
 height: 8,
 width: 8,
},
likeInfo:{
 flex: 1,
 paddingLeft: 25,
 paddingRight: 25,
},
likeText:{
 fontWeight: 'bold',
 fontSize: 8,
 marginBottom: 5,
}
});

export default MainApp;

下面是带有数据的json文件;

[
 {
  "name":"Vipin Dubey",
  "text": "While meditating we are simply seeing what the mind has been doing all along.",
  "likes": 5
 },
 {
  "name":"Vipin Dubey",
  "text": "Suffering is due to our disconnection with the inner soul. Meditation is establishing that connection .",
  "likes": 100
 },
 {
  "name":"Vipin Dubey",
  "text": "Self-observation is the first step of inner unfolding.",
  "likes": 85
 },
 {
  "name":"Vipin Dubey",
  "text": "When meditation is mastered, the mind is unwavering like the flame of a candle in a windless place.",
  "likes": 146
 }
]

Answer 1

我认为您的listview高度存在问题，因此请尝试根据您的要求设置listview高度，或在listview样式属性上设置flex:1并在外部视图中删除flex。

干杯：）

Answer 2

非常抱歉这个愚蠢的问题，我试图用我的Macbook中的两个手指滚动它并不起作用，但是如果我试图向上或向下拖动它会起作用。感谢您的帮助。

无法在ReactNative中使用ListView滚动

2 个答案: