Zeng Yong Zeng Yong - 1 month ago 27
React JSX Question

React native. listview can't scroll when it is inside a scrollview. (iOS work, but android not)

[React Native android] Any body know how to make listview scroll when it is embedded in a scrollview? It is work for iOS, but not work for android.

<ScrollView>
<Text>test1</Text>
<Text>test2<Text>
<ListView/>
<scrollview>

Answer

This is not the right way to go. Even if you manage to make this work, it's a bad practice. Remember that the main difference between a ScrollView and a ListView is that the ListView renders only the visible items and recycles them in order to optimize memory usage. By adding the ListView in a ScrollView you're likely to "sabotage" this feature.

Instead of trying to add the ListView in the ScrollView, use only a ListView with items of different type. Something along the lines:

export default class MyListComponent extends Component {
    constructor(props) {
        super(props);

        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.state = {
            dataSource: ds.cloneWithRows(this.props.data)
        };
    }

    render() {
        return (
            <ListView
                enableEmptySections={true}
                dataSource={this.state.dataSource}
                renderRow={(rowData) => this._getViewForType(rowData)}/>
        );
    }

    _getViewForType(rowData) {
        switch (rowData.renderType) {
            case 'type1':
                return <Text>test1</Text>
            case 'type2':
                return <Text>test2</Text>
            default:
                // Render your normal/default listview item here.
                return ...
        }
    }
}

Now before rendering this view, you just need add two extra items in your list of items: one of type "type1" and another one of type "type2".