Question

我正在使用react native编写应用程序。它有一个ListView来显示项目列表。我的代码如下所示：

var ListMoviesView = React.createClass({

getInitialState() {
    return {
        dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2
        }),
        loaded: false
    };
},

componentDidMount : function() {
    this.fetchData();
},



render : function() {
    if (!this.state.loaded) {
        return this.renderLoadingView();
    }

    return(

          <ListView
               dataSource={this.state.dataSource}
               renderRow={this.renderMovie}
               style={styleList.listView} />
    );
},

renderMovie(movie) {
    return (
        <View style={styleList.container}>
            <Image source={{uri: movie.posters.thumbnail}} style={styleList.thumbnail} />
        </View>
    );
},

buttonClicked : function (movie){
}


});

这是完美的列表滚动工作。但如果我有这样的ToolbarAndroid：

    return(
        <View>
            <ToolbarAndroid
                actions={toolbarActions}
                onIconClicked={() => this.setState({actionText: 'Icon clicked'})}
                style={styleToolbar.toolbar}
                subtitle={this.state.actionText}
                title="Toolbar" />
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderMovie}
                style={styleList.listView} />
        </View>
    );

ListView不滚动。我忘记了什么？

我的风格：

toolbar: {
    backgroundColor: '#e9eaed',
    height: 56
}


listView: {
    flexDirection: 'column',
    flex:1,
    backgroundColor: '#F5FCFF'
}

我尝试添加容器View和ScrollView，但这也不行。

Answer 1

你应该添加一个样式喜欢：

<View style={styles.container}>
   <ToolbarAndroid />
   <ListView />
</View>

式：

container:{
flex:1,
}

我不知道为什么，但它确实有用。

React本机ListView不滚动

1 个答案: