react-native:Modal 中的选择器未显示
react-native: Picker in Modal not showing
当我的 Picker 嵌入到 Modal 中时,它没有出现在屏幕上(仅针对 android 进行了测试)
renderModal() {
return (
<Modal
transparent={true}
visible={this.state.showModal}
onRequestClose={() => this.setState({ modalIsVisible: false })}
animationType={'fade'}>
<View
style={{ backgroundColor:'rgba(0, 0, 0, 0.7)', flex: 1, justifyContent: 'center', padding: 20, height:100 }}>
<View style={{ borderRadius:10, alignItems: 'center', backgroundColor: '#fff', padding: 20 }}>
<Text>
Choisissez la priorité de cet emplacement
</Text>
<Picker
selectedValue={this.state.storagePriority}
onValueChange={(priority) => this.setState({storagePriority: priority})}>
<Picker.Item label="Basse" value="LOW" />
<Picker.Item label="Normale" value="MEDIAN" />
<Picker.Item label="Haute" value="HIGH" />
<Picker.Item label="Réserve" value="STOCK" />
</Picker>
</View>
</View>
</Modal>
);
}
有什么建议吗?
为 Picker 设置一个 style={{ width: 100 }}
解决了它
为选择器和 运行 提供适当的样式。
这是样式选择器的示例代码。
<Picker
style={styles.picker}
mode="dropdown"
itemStyle={styles.itemStyle}>
<Item label="Basse" value="LOW" />
<Item label="Normale" value="MEDIAN" />
</Picker>
样式:
itemStyle: {
fontSize: 15,
height: 75,
color: 'black',
textAlign: 'center',
fontWeight: 'bold'
}
picker: {
width: 100
},
当我的 Picker 嵌入到 Modal 中时,它没有出现在屏幕上(仅针对 android 进行了测试)
renderModal() {
return (
<Modal
transparent={true}
visible={this.state.showModal}
onRequestClose={() => this.setState({ modalIsVisible: false })}
animationType={'fade'}>
<View
style={{ backgroundColor:'rgba(0, 0, 0, 0.7)', flex: 1, justifyContent: 'center', padding: 20, height:100 }}>
<View style={{ borderRadius:10, alignItems: 'center', backgroundColor: '#fff', padding: 20 }}>
<Text>
Choisissez la priorité de cet emplacement
</Text>
<Picker
selectedValue={this.state.storagePriority}
onValueChange={(priority) => this.setState({storagePriority: priority})}>
<Picker.Item label="Basse" value="LOW" />
<Picker.Item label="Normale" value="MEDIAN" />
<Picker.Item label="Haute" value="HIGH" />
<Picker.Item label="Réserve" value="STOCK" />
</Picker>
</View>
</View>
</Modal>
);
}
有什么建议吗?
为 Picker 设置一个 style={{ width: 100 }}
解决了它
为选择器和 运行 提供适当的样式。
这是样式选择器的示例代码。
<Picker
style={styles.picker}
mode="dropdown"
itemStyle={styles.itemStyle}>
<Item label="Basse" value="LOW" />
<Item label="Normale" value="MEDIAN" />
</Picker>
样式:
itemStyle: {
fontSize: 15,
height: 75,
color: 'black',
textAlign: 'center',
fontWeight: 'bold'
}
picker: {
width: 100
},