组件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'
}
})