react-native json文件

按照黑森林的demo写的，没完全按照报了点问题

1. 今天遇到2个问题，在react-native 中一个json的文件（数组类型的），获取后

Import HomeSiftData from ‘../data/homeSiftData.json’

Let data2 = {HomeSiftData}

这个获取后，data2不是数组的它里面包了议程data.HomeSiftDta[]这样的结构

Let data

For(var i=0;i<data2.HomeSiftData.length;i++){

Data.push(data2.HomeSiftData[i]);

}

1. 今天又遇到个问题，就是TouchableOpacity,在它里面如果包含了View，view的flex:1,则View不显示

 render(){

        return(

            <TouchableOpacity

            activeOpacity={1}>

                <View style={styles.container}>

                    <ListView

                        dataSource={this.state.dataSource}

                        renderRow={(rowData) => this.renderRow(rowData)}

                        initialListSize={16}

                        contentContainerStyle={styles.contentViewStyle}/>

                </View>

            </TouchableOpacity>

        );

}

 

container:{

        // flex: 1,

        width:width,

        height:height,

        // backgroundColor:'blue'

        // backgroundColor:'transparent'

    },

1. 使用模态进行数据的回调

就是控件一个函数，然后调用这个控件的时候写这个函数，然后在控件中定义默认的函数，控件中this.props.这个函数就调用了

控件类

export default class GDCommunalSiftMenu extends Component{

   

    static defaultProps = {

        removeModal:{},

        loadSiftData:{}  //声明默认Props属性

    };

    

refreshHomeData(rowData){

 

        this.props.loadSiftData(rowData.mall,rowData.cate);

        this.popToHome(false);

    }

其他类中使用整个控件

    <GDCommunalSiftMenu

                        removeModal = {(data) => this.closeModal(data)}

                        loadSiftData ={(mall,cate) =>this.loadSiftData(mall,cate)}

                    />

1. 1. 2018-10-12
2. react-native 传递参数的几种方式
   1. 通过跳转navigation进行传递
   2. 有Modal的通过控件中设置属性进行参数传递，和函数传递，callback

static defaultProps = {

        removeModal:{}

    }

    

render(){

        return(

            <View style={styles.container}>

                <View style={styles.centerViewStyle}>

                    <TouchableOpacity onPress={() => this.closeModal()}>

                        <Text>

                            myCustome

                        </Text>

                    </TouchableOpacity>

                </View>

            </View>

        );

    }

 

    closeModal(){

        this.props.removeModal(false);

    }

    

    另外一个页面

    

<Modal

                    animationType="none"

                    transparent={true}

                    visible={this.state.isModalVisible}

                    onRequestClose={() => this.closeModal()}

                    >

                    <CustomAlert

                        removeModal = {(data) => this.removeMyModal(data)}

                    />

                </Modal>

                

removeMyModal(data){  //回调了

        this.setState({

            isModalVisible:data,

        });

}