如何在React Native中滚动页面

问题描述 投票:0回答:2

enter image description here

我无法滚动页面。怎么了?

export default class CustomersTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      token: "",
      isLoading: true,
      dataSource: null
    };
  }

  componentWillMount() { MY APİ CODES - HERE İS NOT İMPORTANT
        )
          .then(response => response.json())
          .then(responseData => {
            this.setState({
              isLoading: false,
              dataSource: responseData.result
            });
          });
      })
      .catch(error => console.warn(error));
  }
  static navigationOptions = {
    title: "Firmaların Listesi",
    tabBarIcon: <Icon name="ios-people" style={{}} />
  };
  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    } else {
      return this.state.dataSource.map((val, key) => {

        return (
          <List key={key}>
            <ListItem
              roundAvatar
              avatar={{ uri: "url/notimportant" }}
              key={key}
              title={val.name+" "+val.surname}
              subtitle={val.customerType}
            />
          </List>
        );
      });
    }
  }
}

我尝试了不同的代码,但没有改进。如何查看页面中的所有数据? “加载其他人”按钮也可以起作用。有没有人有想法?注意:数据没问题。问题是滚动。

reactjs react-native
2个回答
1
投票

你的渲染元素应该包含在qazxsw poi中。

ScrollView

0
投票

你可以使用 return ( <ScrollView> {this.state.dataSource.map((val, key) => { return ( <List key={key}> <ListItem roundAvatar avatar={{ uri: "url/notimportant" }} key={key} title={val.name + " " + val.surname} subtitle={val.customerType} /> </List> ); })} </ScrollView> ); FlatList。记得导入它们。如果你看到ScrollView并阅读它你可以使用它。您使用它的另一个标签,如View不滚动。

© www.soinside.com 2019 - 2024. All rights reserved.