react-native - 如何在 RN Picker android 中将项目和选定项目居中？

Question

是否可以将 android 选择器项目和选定项目居中？我到处搜索，并尝试使用 alignItems:'center' & justifyContent:'center'，但是当我放置 alignSelf:'center' 选择器不再可见时，项目仍然左对齐(在照片上可见)。有人有任何线索吗？

    var REPORTS = [
        {name: 'Report 1', id: 'r1'},
        {name: 'Report 2', id: 'r2'},
        {name: 'Report 3', id: 'r3'},
        {name: 'Report 4', id: 'r4'},
        {name: 'Report5', id: 'r5'},
        {name: 'Report6', id: 'r6'}
    ];

    ...
        <Picker style={styles.androidPicker} mode={'dropdown'}
                selectedValue={this.state.report} itemStyle={styles.reports.iosPicker}
                onValueChange={(reportId) => this.onReportChanged(reportId)}>
           {REPORTS.map(function (reports) { 
               return <Picker.Item style={{alignSelf:'center'}} label={reports.name} 
                           value={reports.id} key={reports.name + reports.id}/>;})} </Picker>

    ...

样式:

var styles = StyleSheet.create({
    androidPicker: {
            flex: 1,
            color: '#6D6D6D',
            backgroundColor: '#FFF',
            marginBottom: 20,
            height: 40, 
            alignItems:'center', 
            justifyContent:'center',
            flexDirection: 'row'
        }
})

这里是关闭和打开的选择器的快照:

提前致谢! :)

Answer 1

首先你需要设置 useNativeAndroidPickerStyle={false} 因为这将允许你使用一些样式 Prop ，如 inputAndroid 和 inputAndroidContainer 等。然后你可以在这些样式中进行必要的样式设置。查看文档 here ，您就会明白这一点。