Question

回购链接为here

我无法滚动列表视图。我尝试了以下解决方案但遇到了错误：

import { ScrollView } from 'react-native';

...

<View style={{flex: 1}}>
  <ScrollView>
    <List>
      ...
    </List>
  </ScrollView>
</View>

该页面的代码在这里，无论我使用的是react-native还是react-native-elements中的元素，都会出现使用scrollview的错误。

import React, { Component } from 'react';
import { Text, View, Scrollview } from 'react-native';
import { List, ListItem } from 'react-native-elements';

const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'December 8, 2017'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'December 8, 1973'
  },

class Individuals extends Component {
  render() {
    return (
      <View style={{ backgroundColor: 'white', flex: 1 }} >

      <List containerStyle={{ marginBottom: 20 }}>
        {
          list.map((l, i) => (
            <ListItem
              roundAvatar
              avatar={{ uri: l.avatar_url }}
              key={i}
              title={l.name}
              subtitle={`Last Practiced: ${l.subtitle}`}
            />
          ))
        }
      </List>

     </View>


   );
  }
}

export default Individuals;

Answer 1

您很可能在import语句中拼写了ScrollView

只需从

进行更改

import { Text, View, Scrollview } from 'react-native'

到

import { Text, View, ScrollView } from "react-native";

和

这就是我的工作方式

import React, { Component } from "react";
import { Text, View, ScrollView } from "react-native";
import { List, ListItem } from "react-native-elements";
const list = [
{
name: "Amy Farha",
avatar_url:"https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
subtitle: "December 8, 2017"
},
{
name: "Chris Jackson",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",
subtitle: "December 8, 1973"
},
{
name: "Amy Farha",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
subtitle: "December 8, 2017"
},
{
name: "Chris Jackson",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",
subtitle: "December 8, 1973"
},
{
name: "Amy Farha",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
subtitle: "December 8, 2017"
},
{
name: "Chris Jackson",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",
subtitle: "December 8, 1973"
},
{
name: "Amy Farha",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
subtitle: "December 8, 2017"
},
{
name: "Amy Farha",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
subtitle: "December 8, 2017"
},
{
name: "Amy Farha",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
subtitle: "December 8, 2017"
},
{
name: "Chris Jackson",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",
subtitle: "December 8, 1973"
},
{
name: "Amy Farha",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
subtitle: "December 8, 2017"
},
{
name: "Chris Jackson",
avatar_url:
"https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",
subtitle: "December 8, 1973"
}
];

export default class App extends React.Component {
render() {
return (
  <ScrollView style={{ backgroundColor: "white", flex: 1 }}>
    {list.map((l, i) => (
      <ListItem
        roundAvatar
        avatar={{ uri: l.avatar_url }}
        key={i}
        title={l.name}
        subtitle={`Last Practiced: ${l.subtitle}`}
      />
    ))}
  </ScrollView>
);
}
}

React Native元素：列表不滚动

1 个答案: