英文:
Band at the bottom and the top of the screen of my React-native application
问题
I'm creating an application using React Native but I have a problem. There is a band at the bottom and at the top of the screen. I think that the "ScreenBase" element is the cause of this mistake, but I can't remove it because it's very important.
以下是代码的翻译部分:
return (
<ScreenBase style={styles.container}>
<ScrollView>
<View style={styles.field}>
<Text style={styles.fieldName}>{t('contact')} : </Text>
<Text style={styles.fieldValue}>{inventory.contact}</Text>
</View>
{isModified && (
<View style={styles.field}>
<Button
title={t('uploadToServer')}
buttonStyle={[styles.syncBtn]}
containerStyle={styles.syncBtnContainer}
titleStyle={{ color: styles.syncBtn.color }}
onPress={syncSelfToServer}
icon={{
name: 'cloud-upload',
type: 'font-awesome',
color: styles.syncBtn.color,
style: { paddingLeft: 5 },
}}
iconRight={true}
/>
</View>
)}
<View style={styles.field}>
<Text style={styles.fieldName}>{t('lotsPlural')} : </Text>
<View style={styles.pictureList}>
{displayedLots}
</View>
</View>
</ScrollView>
{/* BUTTON TO ADD A LOT */}
<TouchableOpacity
style={[styles.button, styles.addLotBtn]}
onPress={() => navigation.navigate('LotForm', { pId: inventory.id })}
>
<Icon
name="plus"
type="font-awesome"
color={styles.iconAdd.color}
style={styles.iconAdd}
size={styles.iconAdd.fontSize}
/>
</TouchableOpacity>
</ScreenBase>
);
请问还有其他问题吗?
英文:
I'm creating an application using React-native but I have a problem. There is a band at the bottom and at the top of the screen. I think that the "ScreenBase" element is the cause of this mistake, but I can't remove it because it's very important.
Here is a screenshot of my application. You can see the band at the top and at the bottom.
Here the code of my screen :
return(
<ScreenBase style={styles.container}>
<ScrollView>
<View style={styles.field}>
<Text style={styles.fieldName}>{t('contact')} : </Text>
<Text style={styles.fieldValue}>{inventory.contact}</Text>
</View>
{isModified && <View style={styles.field}>
<Button
title={t('uploadToServer')}
buttonStyle={[styles.syncBtn]}
containerStyle={styles.syncBtnContainer}
titleStyle={{ color: styles.syncBtn.color }}
onPress={syncSelfToServer}
icon={
{
name:'cloud-upload',
type:'font-awesome',
color:styles.syncBtn.color,
style: {paddingLeft: 5}
}
}
iconRight={true}
/>
</View>}
<View style={styles.field}>
<Text style={styles.fieldName}>{t('lotsPlural')} : </Text>
<View style={styles.pictureList}>
{/* <TouchableOpacity
style={styles.pictureBtn}
onPress={() => navigation.navigate('LotForm', {pId: inventory.id})}
>
<Icon
name='plus'
type='font-awesome'
color={styles.pictureBtn.color}
style={styles.icon}
size={100}
/>
<Text style={styles.pictureTitle}>{t('addLot')}</Text>
</TouchableOpacity> */}
{displayedLots}
</View>
</View>
</ScrollView>
{/* BUTTON TO ADD A LOT */}
<TouchableOpacity style={[styles.button, styles.addLotBtn]} onPress={() => navigation.navigate('LotForm', {pId: inventory.id})}>
<Icon
name='plus'
type='font-awesome'
color={styles.iconAdd.color}
style={styles.iconAdd}
size={styles.iconAdd.fontSize}
/>
</TouchableOpacity>
</ScreenBase>
)
Do you have a solution to resolve my problem please ?
Thank you !
I tried to remove the ScreenBase element. It works but it's a bad practice because this element is very important.
答案1
得分: 1
我已通过向 ScrollView 添加 overflow: 'visible' 来解决了我的问题。
英文:
I have resolved my problem by adding overflow: 'visible' to the ScrollView.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论