PickerView只能在外层View为flex:1的时候使用

[1026576357]

极其不方便,而且设置为flex:1后 后面的组件会被设置为Bottom为0 ,选择框与显示框存在耦合

[ant-design-bot]

Hello @1026576357. Please provide a re-producible demo: https://codepen.io/pen?template=LWpaKe&editors=0010

[ziluo]

请给下相关代码或截图方便排查问题

[1026576357]

/ tslint:disable:no-console / import React from 'react'; import {FlatList, Dimensions, Image, ScrollView, StyleSheet, Text, View, Button, TouchableOpacity} from 'react-native'; import {NoticeBar, TextareaItem, WhiteSpace} from '@ant-design/react-native';

import {connect} from "react-redux"; import TrendingItem from "../common/TrendingItem"; import NavigationUtil from "../navigator/NavigationUtil"; import CheckAccountsItem from "../common/CheckAccountsItem"; import AreaComponent from "../common/AreaComponent" import ListRow from "teaset/components/ListRow/ListRow"; var {width}=Dimensions.get("window"); var {height}=Dimensions.get("window"); import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button' class CheckAccounts extends React.Component { constructor(props){ super(props); this.state={ sc:false, sc2:false, text: '', write:'未填写', val:'', }

    this.onSelect = this.onSelect.bind(this)
}
onSelect(index, value){
           this.setState({
                text: `Selected index: ${index} , value: ${value}`
        })
       }
onChange = val => {
    // console.log(val);
    if(val.length>1){
        this.setState({ write:'已填写' });
    }
    this.setState({ val });
};
render() {console.log(this.props.navigation.getParam("pros"))
   return(

       <View style={styles.container}>
           <ScrollView>
           <View>
               <Text>所购商品</Text>
               <FlatList style={{marginTop:10}}
                         data={this.props.navigation.getParam("pros")}
                         renderItem={data => this.renderItem(data)}
                         keyExtractor={(item,index) =>index+""}
                         extraData={this.state}
               />
           </View>
           <AreaComponent></AreaComponent>
           <View>
               <View style={{marginLeft:width*0.1}}>
               </View>
           <ListRow title='详细地址' detail={this.state.write} onPress={()=>{
               this.setState({
                   sc:!this.state.sc
               })
           }} detailStyle={{fontSize: 15, color: '#31708f'}} accessory='indicator'/>
           {this.state.sc?                       <TextareaItem rows={3} onChange={this.onChange}  width={width*0.8} placeholder="详细地址..." style={{backgroundColor: '#fcf8e3',marginLeft:width*0.1, borderColor: '#8a6d3b', color: '#8a6d3b'}} />
               :null}
               <ListRow title='订单备注' detail='选填,请和商家协商一致' onPress={()=>{
                   this.setState({
                       sc2:!this.state.sc2
                   })
               }} detailStyle={{fontSize: 15, color: '#31708f'}} accessory='indicator'/>
               {this.state.sc2? <TextareaItem rows={3}   width={width*0.8} placeholder="备注..." style={{backgroundColor: '#fcf8e3',marginLeft:width*0.1, borderColor: '#8a6d3b', color: '#8a6d3b'}} />
               :null}
               <View style={{flexDirection:'row',marginTop:height*0.1}}>
                   <Text style={{fontSize:20,paddingVertical: 6, paddingLeft: 5,
                       textAlign: 'center'}}>支付方式:</Text>

                              <View style={styles.container}>
                                  <RadioGroup style={{flexDirection:'row'}}
                                       onSelect = {(index, value) => this.onSelect(index, value)}
                                   >
                                       <RadioButton value={'item1'} >
                                            <Text>微信</Text>
                                      </RadioButton>

                                      <RadioButton value={'item2'}>
                                           <Text>支付宝</Text>
                                       </RadioButton>
                                      <RadioButton value={'item2'}>
                                          <Text>货到付款</Text>
                                      </RadioButton>
                                   </RadioGroup>
                              </View>
           </View>
       </View>
               <TouchableOpacity style={styles.Btn} onPress={()=>{
                   alert('测试中');
               }}>
                   <Text style={{color:'#FFFFFF'}}>立即支付</Text>
               </TouchableOpacity>
           </ScrollView>
       </View>

   )
}

renderItem(data){ return <CheckAccountsItem item={data} onSelect={(callback) => { NavigationUtil.goPage({ }, 'DetailPage') }}

/>

} } const mapStateToProps = state => ({ state: state }); const mapDispatchToProps = dispatch => ({ dispatch:dispatch }); //注意：connect只是个function，并不应定非要放在export后面 CheckAccounts = connect(mapStateToProps, mapDispatchToProps)(CheckAccounts) export default CheckAccounts const styles = StyleSheet.create({ container:{ flex:1, // backgroundColor:'#FFFFF0', // justifyContent:'center' }, Btn:{ backgroundColor: '#3CC4A9', padding: 10, alignItems: 'center', marginTop: 20, marginLeft: 10, marginRight: 10, borderRadius: 3, }, }) //组件 // import { district } from 'antd-mobile-demo-data'; import React from 'react'; import { Text, TouchableOpacity, View } from 'react-native'; import { List, Picker, Provider } from '@ant-design/react-native'; const data = require('./area');

export default class AreaComponent extends React.Component { constructor(props) { super(...arguments); this.onPress = () => { setTimeout(() => { this.setState({ data: data, }); }, 500); }; this.onChange = value => { this.setState({ value }); }; this.state = { data: [], value: [], }; } render() { console.log(this.state.value); return (

省市选择

    );
}

} 说明:当点击选择后 底部弹出框会根据flex的高度来指定绝对定位的位置, 并没有自定义到屏幕底部的标签,导致会在选择区域时 下面产生留白或者是显示底层视图

[awmleer]

v2 已停止维护了，可以考虑升级一下