反应本机iOS中的TextInput

Posted 2023-04-18

【中文标题】反应本机iOS中的TextInput

【英文标题】：TextInput in react native iOS

【发布时间】：2016-10-24 02:37:11

【问题描述】：

我在 react native 中有一个 TextInput 组件

<TextInput
            style=styles.searchBar
            value=this.state.searchText
            onChange=this.setSearchText.bind(this)
            placeholder='Search State'
         />

这在 android 中运行良好，但在 ios 应用程序中没有显示 Textbox。而且，没有什么可以找到问题所在。

有人可以帮忙解决这个问题吗？

【参考方案1】：

这是一个代码示例，演示了需要为 iOS 上的TextInput 组件提供高度。 docs 中没有明确说明，但仔细查看它，您会注意到代码示例的 iOS 部分提供了一个高度，而 android 示例没有。这是一个完整的代码示例，它在视图的中心显示一个TextInput：

import React,  Component  from 'react';
import 
  AppRegistry,
  StyleSheet,
  TextInput,
  View
 from 'react-native';

class MyApp extends Component 
  constructor (props) 
    super(props);
    this.state = 
      searchText: ''
    ;
  

  setSearchText (e) 
    this.setState(
      searchText: e.target.value
    );
  

  render () 
    return (
      <View style=styles.container>
        <TextInput
              style=styles.searchBar
              value=this.state.searchText
              onChange=this.setSearchText.bind(this)
              placeholder='Search State'
           />
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  ,

  searchBar: 
    borderWidth: 1,
    height: 40
  
);

AppRegistry.registerComponent('MyApp', () => MyApp);

如果这对调试代码没有帮助，请发布您为 TextInput 配置的样式定义 (styles.searchBar)，以便我们进行更好的测试。

【讨论】：

谢谢。有效。我错过了样式属性

【参考方案2】：

你应该给文本输入的高度和宽度以将文本输入显示为：

<Textinput style=height:200, width:300/>

【讨论】：

它仍然没有出现。而且，它在android bdw中工作。 iOS 有什么不同吗？