屏幕底部和顶部的带状区域在我的React Native应用中。

huangapple go评论43阅读模式
英文:

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(
&lt;ScreenBase style={styles.container}&gt;
&lt;ScrollView&gt;
&lt;View style={styles.field}&gt;
&lt;Text style={styles.fieldName}&gt;{t(&#39;contact&#39;)} : &lt;/Text&gt;
&lt;Text style={styles.fieldValue}&gt;{inventory.contact}&lt;/Text&gt;
&lt;/View&gt;
{isModified &amp;&amp; &lt;View style={styles.field}&gt;
&lt;Button
title={t(&#39;uploadToServer&#39;)}
buttonStyle={[styles.syncBtn]}
containerStyle={styles.syncBtnContainer}
titleStyle={{ color: styles.syncBtn.color }}
onPress={syncSelfToServer}
icon={
{
name:&#39;cloud-upload&#39;,
type:&#39;font-awesome&#39;,
color:styles.syncBtn.color,
style: {paddingLeft: 5}
}
}
iconRight={true}
/&gt;
&lt;/View&gt;}
&lt;View style={styles.field}&gt;
&lt;Text style={styles.fieldName}&gt;{t(&#39;lotsPlural&#39;)} : &lt;/Text&gt;
&lt;View style={styles.pictureList}&gt;
{/* &lt;TouchableOpacity
style={styles.pictureBtn}
onPress={() =&gt; navigation.navigate(&#39;LotForm&#39;, {pId: inventory.id})}
&gt;
&lt;Icon
name=&#39;plus&#39;
type=&#39;font-awesome&#39;
color={styles.pictureBtn.color}
style={styles.icon}
size={100}
/&gt;                
&lt;Text style={styles.pictureTitle}&gt;{t(&#39;addLot&#39;)}&lt;/Text&gt;
&lt;/TouchableOpacity&gt; */}
{displayedLots}
&lt;/View&gt;
&lt;/View&gt;
&lt;/ScrollView&gt;
{/* BUTTON TO ADD A LOT */}
&lt;TouchableOpacity style={[styles.button, styles.addLotBtn]} onPress={() =&gt; navigation.navigate(&#39;LotForm&#39;, {pId: inventory.id})}&gt;
&lt;Icon
name=&#39;plus&#39;
type=&#39;font-awesome&#39;
color={styles.iconAdd.color}
style={styles.iconAdd}
size={styles.iconAdd.fontSize}
/&gt;
&lt;/TouchableOpacity&gt;
&lt;/ScreenBase&gt;
)

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.

huangapple
  • 本文由 发表于 2023年6月8日 21:10:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/76432211.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定