Реагируйте на собственный рендеринг текста TextInput слишком высоко на iOS, обрезая вершины некоторых символов - PullRequest
Новая
       46

Реагируйте на собственный рендеринг текста TextInput слишком высоко на iOS, обрезая вершины некоторых символов

0 голосов
/ 23 января 2020

У меня есть простой TextInput в моем собственном приложении. Вот соответствующий код: 

<View style={styles.AmountWrapper}>
    <TextInput
        multiline={true}
        placeholder="$0"
        placeholderTextColor={colors.black38}
        style={styles.NumberInput}
        keyboardType={"numeric"}
    />
</View>

let styles = StyleSheet.create({
    AmountWrapper: {
        flexDirection: "column",
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: colors.white
    },
    NumberInput: {
        flexDirection: "row",
        alignItems: "center",
        flex: 0,
        fontFamily: styleHelper.fontFamily("medium"),
        fontSize: 48,
        paddingHorizontal: 16,
        paddingTop: 0,
        paddingBottom: 0,
        color: colors.blue,
        textAlign: "center",
        borderWidth: 0,
        textAlignVertical: "center"
    },
});

Я эмулирую как на Android Studio Pixel 3 с Android 9.0, так и на симуляторе Xcode, имитируя iOS 12.4 iPhone X.

На Android, это рендеринг именно так, как я хочу:

Android rendering properly

Проблема с iOS. Это отрисовывает текст слишком высоко, обрезая верхнюю часть знака доллара и несколько пикселей числа. Это происходит как с заполнителем, так и когда пользователь вводит текст:

iOS rendering improperly

Я попытался изменить поля, отступы, textAlign, lineHeight, flexDirection, выровняйте элементы и выровняйте содержание. Я также пробовал multiline={false} в TextInput.

Как получить iOS рендеринг текста дальше вниз и правильное отображение в TextInput?

1 Ответ

0 голосов
/ 24 января 2020

Я думаю, что у вас есть что-то, перекрывающее нормальное поведение для высоты и lineHeight на IOS. Либо установка lineHeight, либо установка высоты для textInput в реагировать на родной работает для меня на IOS. Я предлагаю установить один из них размером, по крайней мере, таким же, как ваш fontSize, а затем закомментировать строки в вашем стиле, чтобы выяснить, какой из них вызван процессом исключения. Вот пример стиля, который работает в одном из моих проектов: 

         <TextInput style={styles.inputsTwo}
                accessible={this.state.access}
    placeholder="Email"
    clearButtonMode="always"
            onChangeText={text => this.setState({email: text})}
            value={this.state.email}
    />
    <TextInput style={styles.inputs}
                accessible={this.state.access}
    placeholder="Password"
    secureTextEntry={true}
    clearButtonMode="always"
            onChangeText={text => this.setState({password: text})}
            value={this.state.password}
    />

, а затем в стилях, которые у меня есть: 

   inputs: {
     textDecorationLine: 'underline',
     marginBottom: 5,
     textAlign: 'left',
     marginLeft: 30,
     marginRight: 30,
     borderBottomColor: '#808080',
     borderBottomWidth: 2,
     height: 48,
     fontSize: 48
 },
   inputsTwo: {
    textDecorationLine: 'underline',
    marginBottom: 10,
    textAlign: 'left',
    marginLeft: 30,
    marginRight: 30,
    borderBottomColor: '#808080', 
    borderBottomWidth: 2,
    height: 48,
    fontSize: 48
},
...