Question

我在我的react-native应用程序中渲染TextInput，其高度为100像素。用于键入文本的光标显示在Android的中心而不是顶部。对于iOS，光标看起来很好。下面的草图演示了这个问题：

https://sketch.expo.io/SJVIk30ig

使用以下代码呈现TextInput：

<TextInput style={{height: 100, padding: 5, backgroundColor: colorThemes.Blue.lightGrey}} 
          multiline={true}
          value={this.state.value}
          onChange={this.onTextInputChange}
          underlineColorAndroid={'transparent'}
          autoCorrect={true} autoFocus={true}
          autoCapitalize={'sentences'}
        />

Answer 1

重复此question

在textAlignVertical

上将样式属性top设置为TextInput

    <TextInput style={{height: 100, padding: 5, 
      backgroundColor: colorThemes.Blue.lightGrey, 
      textAlignVertical: 'top'}} 
      multiline={true}
      value={this.state.value}
      onChange={this.onTextInputChange}
      underlineColorAndroid={'transparent'}
      autoCorrect={true} autoFocus={true}
      autoCapitalize={'sentences'}
    />

Answer 2

尝试设置lineHeight加fontSize以保持框与文字之间的关系。

尝试使用以下样式：

style={{height: 100, lineHeight: 100, fontSize: 100, padding: 5, backgroundColor: 'grey', }}

当然，您需要使用更适合您的尺寸。

让我知道它是否有效。

由于

Answer 3

只需在您的InputText中添加以下样式，请查看代码

// This is the style for InputText
        const styles = StyleSheet.create({
                inputBox: {
                    fontSize: 13,
                    color: '#404040',
                    // Setting up TextInput height as 50 pixel.
                    height: 150,
                    // Set border width.
                    borderWidth: 1,
                    // Set border Hex Color Code Here.
                    borderColor: '#404040',
                    // Set border Radius.
                    borderRadius: 5,
                    //Set background color of Text Input.
                    backgroundColor: "#FFFFFF",
                    // this for setting cursor to top
                    textAlignVertical: 'top'
                }
            });

    // here is the InputText , we are setting style



<TextInput
             multiline={true}
             style={styles.inputBox}
             placeholder={'Type here...'}
             value={this.state.text}
             onChangeText={newText => this._sendChanges(newText)}
                    />

Answer 4

我们可以使用textAlign:'center'

保持光标位置居中

inputstyle: {
    color: colors.white
    paddingLeft: 4,
    textAlign: 'center',
}

Answer 5

将textAlignVertical: 'top'添加到您的<TextInput>样式中

React-Native - TextInput游标位于Android的中间而不是顶部

5 个答案: