如何在本机反应中在 Modal 中实现 Listview答案

【问题标题】：How to implement a Listview inside Modal in reactnative如何在本机反应中在 Modal 中实现 Listview
【发布时间】：2017-07-19 06:15:32
【问题描述】：

业余 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>
    );
}

}

【问题讨论】：

请分享您尝试过的代码以及您遇到的问题
在@JigarShah 问题中分享了上面的代码
为什么你没有向透明transparent={false}和animationType={"slide"}提供价值
只检查没有模式列表视图是否正常工作，它会给出在代码中查找错误的想法
listview 正在模态中工作，但是在热重载后，模态内的列表视图直接出现，而模态应该在单击按钮时打开。@JigarShah

标签： reactjs listview react-native react-native-listview

【解决方案1】：

检查以下代码的语法：

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

Fly..不要忘记将visibleModal的状态值更改为false，否则将直接呈现

【讨论】：

感谢@JigarShah
很高兴为您提供帮助:)