如何在 React Native 中实现 Modal 中的 Listview

Question

业余ReactNative 开发人员：我正在尝试在React Native 的Modal 中实现一个硬编码的数据列表视图，但无法找到任何合适的解决方案。而且我不想使用第三方插件。请帮忙！
这是我的代码。

export default class ActionSheetMenu extends React.PureComponent {   
constructor(props){
    super(props); 

    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
}

state = {
    visibleModal : false,
};
// data = [
// {
//     "name": {
//         "first": "aiden",
//         "last": "lucas"
//     },
// } ];

_renderButton = (text, onPress) => (
    <TouchableOpacity onPress={onPress}>
        <View>
            <Text>{text}</Text>
        </View>
    </TouchableOpacity>
);

_renderModalContent = () => (
    <View> style = {styles.modalContent}>
        <Text>Hello</Text>
        {this._renderButton('Close', () => this.setState({ visibleModal: false }) )}
    </View>
);

render(){
    return(
        <View style={[styles.container,{backgroundColor: this.state.visibleModal ? 'rgba(0, 0, 0, 0.4)': 'white'}]}>
            <Text>Text Behind Modal</Text>
            {this._renderButton('BUTTON', () => this.setState({ visibleModal: true }))}


            <Modal animationType="slide"
                   transparent
                   visible={this.state.visibleModal}>

                <View style={styles.modalContent}>

                    <ListView 
                        style={styles.listview}
                        dataSource = {this.state.dataSource}
                        renderRow={ (data) => <Text>{data}</Text> }
                    />
                    <Text style={styles.textModal}>text inside modal</Text>

                </View>
            </Modal>

        </View>
    );
}

}

Answer 1

检查以下代码的语法：

<Modal
    animationType={'slide'}
    transparent={false}
    visible={this.props.visibleModal}
    onRequestClose={() => { this.changeVisibility(false); } }
>

Fly..别忘了把visibleModal的state值改成false否则会直接渲染

如何在 React Native 中实现 Modal 中的 Listview

How to implement a Listview inside Modal in reactnative

listview

reactjs

react-native

react-native-listview