在父组件中进行渲染时,仅渲染子组件

时间:2019-05-12 04:50:21

标签: react-native

组件NewEvent有一个子组件AccesslistModal。这是父级NewEvent中的渲染:

render() {
        return (
        <View style={styles.container}>
            <TextInput
                style={styles.input}
                placeholder='Name'
                autoCapitalize="none"
                placeholderTextColor='white'
                onChangeText={val => this.onChangeText('name', val)}
            />
            <>
            <TouchableOpacity onPress={this.showStartDateTimePicker}>
            <Text 
                placeHolder="Start Date"      
                style={styles.titleText}>
                {this.state.event_info_start_datetime}
            </Text></TouchableOpacity>
            <DateTimePicker
                isVisible={this.state.startDateTimePickerVisible}
                onConfirm={this.handleStartDatePicked}
                onCancel={this.hideStartDateTimePicker}
                datePickerModeAndroid='spinner'
                timePickerModeAndroid="spinner"
                minuteInterval={10}
                mode="datetime"
                is24Hour={false}
            />
            </>
            <>
            <TouchableOpacity onPress={this.showFinishDateTimePicker}>
            <Text 
                placeHolder="Finish Date"      
                style={styles.titleText}>
                {this.state.event_info_finish_datetime}
            </Text></TouchableOpacity>
            <DateTimePicker
                isVisible={this.state.finishDateTimePickerVisible}
                onConfirm={this.handleFinishDatePicked}
                onCancel={this.hideFinishDateTimePicker}
                datePickerModeAndroid='spinner'
                timePickerModeAndroid="spinner"
                minuteInterval={10}
                mode="datetime"
                is24Hour={false}
            />
            </>

            <TextInput
                style={styles.input}
                placeholder='Goal #1'
                //keyboardType='number-pad'
                autoCapitalize="none"
                placeholderTextColor='white'
                onChangeText={val => this.onChangeText('finish_datetime', val)}
            />

            <TouchableHighlight >   //<<<<==child component
                <AccesslistModal    //<<<<==child component
                    isVisible={this.state.isModalVisible}
                    updateList={this.updateUserList}
                    activeUsers={this.state.activeUsers}
                />
            </TouchableHighlight>

            <Button
            title='Save'
            onPress={this.save}
            />
        </View>
        )
    }

以下是子组件AccesslistModal中的渲染:

chkBox = (props) => {
        return (
            props.checkboxes.map((cb) => {
                return (
                  <CheckBox
                    key={cb.id}
                    title={cb.title}
                    checked={cb._checked}
                    onPress={() => this.toggleCheckbox(cb.id)} />
                )
              })
            );
    };

    render() {
        return (
            //this.state.checkboxes.map((cb) => {
            <View>
                <Modal>
                   <this.chkBox checkboxes={this.state.checkboxes} />

                </Modal>

            </View>
              //})          
        )
    }

子项AccesslistModal显示复选框列表,供用户检查。

问题在于,仅显示AccesslistModal中的复选框,并且父组件中的任何元素均未显示(我看到父组件在进入子组件之前仅停留在屏幕上一秒钟)。上面的渲染代码有什么问题?

更新:这是样式:

const styles = StyleSheet.create({
    input: {
    width: 350,
    height: 55,
    backgroundColor: '#42A5F5',
    margin: 10,
    padding: 8,
    color: 'white',
    borderRadius: 14,
    fontSize: 18,
    fontWeight: '500',
    },
    titleText:{
    fontSize: 20,
    fontWeight: 'bold',
    },
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
    }
})

0 个答案:

没有答案