Question

正如你们可以看到最后剪切文字一样，我怎么能改变那个小的白盒子大小或让我的文字显示'输入邮政编码，街道或......'因为，如果文字较小的话将它切开并放上三个点。

TouchablePlatform是用于连接TouchableOpacity和TouchableComponent的组件。

<View style={styles.subContainer1}>
     <TouchablePlatform onPress={this._onBackIconPress}>
          <Image
               source={icon}
               style={isListing ? styles.imageIconBack : styles.image}
          />
     </TouchablePlatform>
     <TextInput
          ref={textInput => (this.textInput = textInput)}
          placeholderTextColor={'#9CAFB3'}
          underlineColorAndroid={'#FFFFFF00'}
          placeholder={'Enter a postcode, street or area…'}
          style={styles.textInput}
          onFocus={this._onTextInputFocus}
          value={this.state.text}
    />
</View>

这些是使用的样式

const styles = StyleSheet.create({
    ...
    subContainer1: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginLeft: 15,
        marginTop: 10,
        height: 40,
        borderRadius: 5,
        elevation: 4,
        shadowOpacity: 0.4,
        shadowRadius: 4,
        shadowColor: '#073741',
        shadowOffset: { height: 2, width: 0 },
    },
    image: {
        resizeMode: 'contain',
        height: 25,
        width: 25,
        marginLeft: 15,
    },
    imageIconBack: {
        resizeMode: 'contain',
        height: 18,
        width: 18,
        marginLeft: 22,
    },
    ...
    textInput: {
        width: '65%',
        fontSize: 14,
        marginLeft: 15,
        fontFamily: 'azo-sans-light',
        color: '#043742',
    },
});

如何更改白色区域的大小？要确保文本不被剪切，或者至少使文本剪切，并在剪裁区域显示三个点（...）。

Answer 1

TextInput的起点由textInput.marginLeft样式控制，终点由textInput.width设置，TextInput设置为父容器的65％。您可以调整这些值以调整输入框的大小。

React Native <Text numberOfLines={1} ellipsizeMode="tail" pointerEvents="none" />不支持溢出占位符文本的自动椭圆化。如果你想这样做，你可以通过使用以下属性将Text元素绝对定位在它上面来隐藏它，并在文本输入被聚焦时隐藏它。

{{1}}

如何更改TextInput开始和结束点/

1 个答案: