我有一个视图(包含一个图标和一个文本,用作一个大复选框),它位于ScrollView上方,但是,ScrollView出现在视图的前面,并且文本也没有显示。 / p>
我尝试了flex的每种组合,有时最终都占据了一半的屏幕。
图标/文本在其他屏幕上正常工作。
this shows the view behind the scrollview,rather than neatly above it,with some margin.
this is what it looks like on another screen,fine with margins,etc.
export default StyleSheet.create({
container: {
flex: 1,alignItems: 'center',marginTop: 20,marginBottom: 20,backgroundColor: 'white',},scrollview: {
width: '100%',paddingTop: 10,paddingBottom: 10,heading: {
fontSize: 36,textAlign: 'center',marginLeft: 20,marginRight: 20,subheading: {
fontSize: 20,});```
<View style={ style.container }>
<Text style={ style.heading }>{ this.state.list && this.state.list.name || 'My gift List' }</Text>
{ this.state.list.date ? <Text style={ [ style.subheading,{ marginTop: 5,marginBottom: 10 } ] }>{ formatDate( dateFromIso( this.state.list.date ),"%A %eth %B,%Y" ) }</Text> : null }
<View style={{ flex: 1,flexDirection: 'row',justifyContent: 'center',marginTop: 10,marginBottom: 20 }}>
<Checkbox icon={ this.state.showTicked ? 'check' : null } onPress={ () => this.setState( { showTicked: ! this.state.showTicked } ) } />
<Text style={{ marginLeft: 10 }} onPress={ () => this.setState( { multiple: ! this.state.multiple } ) }>I would like more than one</Text>
</View>
{
this.state.list.items.length > 0 ?
<ScrollView style={ style.scrollview } >
<flatList style={ { marginTop: 10,marginBottom: 50,width: "100%",borderTopColor: '#ddd',borderTopWidth: 1 } } data={ this.state.list.items } renderItem={ this.renderItem } />
</ScrollView>
: null
}
</View>```
const Checkbox = args => {
const props = Object.assign( {},args );
props.containerStyle = Object.assign( { width: 40 },props.containerStyle || {} );
props.buttonStyle = Object.assign( { backgroundColor: 'transparent',borderWidth: 1,borderColor: '#555',height: 40 },props.buttonStyle || {} );
if ( props.icon )
{
let iconProps = Object.assign( { type: 'font-awesome',name: props.icon,color: "#555555",size: 20 },props.iconStyle || {} );;
props.icon = <RNEIcon {...iconProps} />
}
return <RNEButton {...props} />
};