React Native - 当 TextInput 中的文本长于 TextInput 且不在焦点时出现三个点答案

【问题标题】：React Native - Three dots when text in TextInput is longer than TextInput and when not in focusReact Native - 当 TextInput 中的文本长于 TextInput 且不在焦点时出现三个点
【发布时间】：2017-07-03 07:21:00
【问题描述】：

所以我将尝试解释我的场景。

我有一个单行TextInput。当用户为onFocus 时，TextInput 中的文本可以比TextInput 本身更长。

但是，当用户不再是onFocus 时，Android 和 iOS 的行为会有所不同。

iOS： 在行尾添加三个点并显示文本的开头。

安卓： 未进行任何更改。

对于这种特殊情况，如何使 Android 中的 TextInput 的行为与 iOS 中的一样？

谢谢

【问题讨论】：

你解决了吗？

标签： react-native react-native-android

【解决方案1】：

 const placeHolderLengthLimit = useMemo(
        () => (tooltip ? 31 : 37),
        [tooltip],
    );

    const placeholderString = useMemo(
        () =>
            placeholder
                ? Platform.OS === 'ios' ||
                  placeholder?.length <= placeHolderLengthLimit
                    ? placeholder
                    : placeholder?.slice(0, placeHolderLengthLimit) + '...'
                : undefined,
        [placeHolderLengthLimit, placeholder],
    );

                   <TextInput
                        placeholder={placeholderString}
                    />

【讨论】：

【解决方案2】：

我不知道您是否得到了答案，但 ellipsizeMode 和 numberOfLines 将有助于此查询。

          <TextInput
            ellipsizeMode="tail"
            numberOfLines={1}
            ref={(textInput) => { this.textInput = textInput; }}
            style={}
            placeholder="Type a message..."
            onSubmitEditing={}
            onChange={}
          />

【讨论】：

ellipsizeMode="tail" 仅适用于 Text 而不是 TextInput
顺便说一句，Text中ellipsizeMode的默认值为tail。