react-native - 在父组件中渲染时只渲染子组件

Question

组件NewEvent有一个子组件AccesslistModal。这是 parent 中的渲染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>
              //})          
        )
    }

ChildAccesslistModal显示一个复选框列表供用户检查。

问题是只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'
    }
})

标签： react-native