文本输入占位符在本机反应中下降

Posted 2023-04-18

【中文标题】文本输入占位符在本机反应中下降

【英文标题】：Text input placeholder going down in react native

【发布时间】：2019-09-28 23:52:33

【问题描述】：

在我的 react native 应用程序中，当我按下文本输入时，占位符会下降一点，如下图所示。我们怎样才能解决这个问题？在屏幕上进行简单的触摸和滚动即可进行此更改。有或没有滚动视图都不起作用

> below is my code
           <ScrollView>
          <View style=styles.Seventh>
            <View style=styles.Eighth>
              <Image style=styles.Imagethird source=require('../src/Assets/Profile-xhdpi.png') />
            </View>
            <View style=styles.ninth>
              <Text style=styles.Textthird>USER'S NAME</Text>
              <TextInput placeholder="user's name               " style=styles.one underlineColorandroid='transparent'
            //--------------value Handler----------------//
            onChangeText=(firstName) => this.setState(firstName)

            //---------------------------------//
              />
            </View>
            </View>
            </ScrollView>
            Seventh: 
                height: 60,
                width: '100%',
                borderRadius: 70,
                flexDirection: 'row',
                elevation: 3,
                backgroundColor: 'white',
                marginTop:10
            ,
            Eighth: 
                height: 60,
                width: '20%',
                justifyContent: 'center',
                alignItems: 'center'
            ,
            Imagethird: 
                height: 20,
                width: 20,
                resizeMode: 'contain',
            ,
            ninth: 
                height: 60,
                width: '80%',

            ,
            Textthird: 
                marginRight:29,
                marginTop: 10,
                fontSize: 12,
                color: '#C7C7CD'
            ,one:
        marginBottom:25,
        fontWeight:'bold',
     


  [1]: https://i.stack.imgur.com/Cq2wx.png

【问题讨论】：

在 android 和 ios 上看起来不错。

@Junius L. 它在加载时看起来不错，但只需触摸并在框上滚动和/或滑动选项也将此样式添加到一个： marginBottom:25, fontWeight:'bold',

我确实看过snack.expo.io/@lekgwaraj/delete-me-2

@JuniusL。试试这个代码。在上面的代码中，我忘了添加滚动视图snack.expo.io/@savadks1818/delete-me-2

适用于我的设备和模拟器。

【参考方案1】：

我认为问题出在边距..我也有这个问题，发现文本输入有一个默认边距值，尝试将边距设置为 0，

<TextInput style=margin:0,padding:0 placeholder="place holder"/>

【讨论】：

这不是一个完整的答案，我认为这是一个更好的评论。