react native TextInput不能滑动

175 阅读1分钟

TextInput组件需要文字放置在右边,于是乎简单的加个testAlign="right"

<TextInput placeholder="test" textAlign='right'/>

当展示页面TextInput过多需要滑动时

 <ScrollView style={{ flex: 1, }}>
            <TextInput placeholder="test" textAlign='right'/>
            <TextInput placeholder="test" textAlign='right'/>
            <TextInput placeholder="test" textAlign='right'/>
            <TextInput placeholder="test" textAlign='right'/>
            <TextInput placeholder="test" textAlign='right'/>
            <View style={{ height: 150, backgroundColor: "red" }} />
            <TextInput placeholder="test" textAlign='right'/>
            <TextInput placeholder="test" textAlign='right'/>
            <TextInput placeholder="test" textAlign='right'/>
            <TextInput placeholder="test" textAlign='right'/>
             <View style={{ height: 150, backgroundColor: "red" }} />
            <TextInput placeholder="test" textAlign='right'/>
            <TextInput placeholder="test" textAlign='right'/>
            <TextInput placeholder="test" textAlign='right'/>
            <TextInput placeholder="test" textAlign='right'/>
  </ScrollView>

会发现红色区域支持滑动而TextInput是不支持滑动的

image.png

实例代码

后期经过实验发现 testAlign="center"设置后也不支持滑动

相关的 issues 讨论,仍然是打开状态

结论就是不要给 TextInput 添加 textAlign属性