Question

我尝试在TextInput字段的左侧添加图片，但它无法正常工作。我已经尝试过放置路径，只是图像的名称，并尝试使用require('path/to/image')，但似乎没有任何效果。

我有类似的东西

<TextInput
    value={this.state.value}
    onChangeText={ (value) => this.setState({value})
    inlineImageLeft="path/to/image"
/>

Answer 1

UIExplorer有一个例子，标题为“内联图像”。

react-native/Examples/UIExplorer/js/TextInputExample.android.js

似乎路径应该与./android/app/src/main/res/drawable/相关。任何其他路径都不起作用。图像也不会缩放。

<TextInput inlineImageLeft="ic_menu_black_24dp"/>

Answer 2

按照本机文档并将图像添加到可绘制文件夹从android studio中的构建选项中清除项目，然后使用react-native run-android重新运行项目。它对我有用

Answer 3

这可能不是最佳解决方案，但它对我有用。我创建了一个flex，左侧是图标，右侧是TextInput。我根据自己的喜好设计了它，并创建了一个包含两者的白色背景的盒子。这是我的CSS样式代码：

container: {
    flex: 1,
    width: '100%',
    height: '100%',
    backgroundColor: '#f5f7fa',
    justifyContent: 'flex-start',
    alignItems: 'center',
},
inputBox: {
    flex: 0,
    flexDirection: 'row',
    width: '90%',
    backgroundColor: 'white',
    borderRadius: 4,
    margin: 5,
    borderColor: '#c4c6c8',
    borderWidth: 1,
},
textInputs: {
    height: 60,
    width: '86%',
    backgroundColor: 'white',
    borderRadius: 4,
    color: '#c4c6c8',
}

如果您不熟悉Flexbox，还可以查看以下文章： https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet-a4147802405c 这个网站让你在现场模式中玩这些属性： http://flexbox.buildwithreact.com/

我希望这会有所帮助：）

React Native - TextInput inlineImageLeft无效

3 个答案: