Question

大家好，

我是使用react-native进行Android开发的新手，我收到了这个错误，我不知道它来自何处，因为我根本不使用ScrollView！我试图在初始屏幕上呈现一个列表，其数据来自api调用。

我的代码是

    import React, { Component } from 'react';
    import {
      Image,
      ListView,
      TouchableHighlight,
      Text,
      View,
      StyleSheet
    } from 'react-native';
    import Api from '../../Utils/api';
    import CategoryRow from './CategoryRow';

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 12,
        flexDirection: 'row',
        alignItems: 'center',
      },
      text: {
        marginLeft: 12,
        fontSize: 16,
      },
      photo: {
        height: 40,
        width: 40,
        borderRadius: 20,
      },
      separator: {
        flex: 1,
        height: StyleSheet.hairlineWidth,
        backgroundColor: '#8E8E8E',
      }
    });

    class Main extends React.Component {

      constructor(props){

        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        this.state = {
          dataSource: ds.cloneWithRows(['row 1', 'row 2'])
        }
      }

      componentDidMount(){

        Api.getCategories()
          .then((res) => {
            this.setState({
              dataSource: ds.cloneWithRows(res)
            })
          })
          .catch();
      }

      render() {
        return(

          <ListView
            style={styles.container}
            dataSource = {this.state.dataSource}
            renderRow={(data) => <CategoryRow {...data} />}
          />

        )
      }
    }

    module.exports = Main;

categoryRow的代码是：

    import React from 'react';
    import { View, Text, StyleSheet } from 'react-native';

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 12,
        flexDirection: 'row',
        alignItems: 'center',
      },
      text: {
        marginLeft: 12,
        fontSize: 16,
      },
      photo: {
        height: 40,
        width: 40,
        borderRadius: 20,
      },
    });

    const CategoryRow = (props) => (
      <View style={styles.container}>
        <Text style={styles.text}>
          ${props.name}
        </Text>
      </View>
    );

    export default CategoryRow;

数据示例：

[
  {
    "categoryId": 1,
    "code": "15",
    "name": "Photography",
    "description": "Are you a photo junkie? Then join the “snap pack” and travel to some of the most photogenic places on earth. Our photography trips put you on an itinerary specially geared towards getting the perfect pic, with a group of like-minded travellers. Learn new tricks, share your knowledge, and never worry about taking the time to get the shot. Bonus: someone always has an extra lens cap.",
    "categoryTypeId": 1,
    "categoryType": {
      "categoryTypeId": 1,
      "name": "Activity"
    }
  }
]

有人可以帮助我找出问题所在以及如何解决此错误吗？

Answer 1

我认为ListView使用ScrollView道具。见http://facebook.github.io/react-native/releases/0.35/docs/listview.html#scrollview

从错误中，您似乎应该在alignItems: 'center'的{{1}}道具中指定contentContainerStyle。从ListView

中删除它

styles.container

Answer 2

  render() {
    return(
       <View style={{
          alignItems: 'center'
        }}>
           <ListView
              style={styles.container}
              dataSource = {this.state.dataSource}
              renderRow={(data) => <CategoryRow {...data} />}
           />)
     </View>
  }

使用react-native for Android在初始页面上呈现列表

2 个答案: