Question

我有一个原生的

中的TextInput组件

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

这在android中工作得很好，但Textbox没有在iOS应用中显示。并且，没有什么可以找到问题所在。

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

Answer 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);

如果在调试代码时检查不合理，请发布您为styles.searchBar配置的样式定义（TextInput），以便我们为您提供更好的测试。< / p>

Answer 2

你应该给textinput高度和宽度显示textinput：

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

TextInput在本机iOS中做出反应

2 个答案: