Question

我已经创建了一个Web应用程序，需要将其转换为react-native-ios应用程序。我已经为Web应用程序创建了一个TextInput小部件，它的功能远远超过了本机的TextInput组件。

如何覆盖TextInput的核心功能，例如onchange方法。
如何为TextInput添加额外的功能。

该网络应用的TextInput小部件用JavaScript编写。我想尽可能避免使用Objective-C。

谢谢。

Answer 1

如果我理解正确，那么这里不需要执行任何特定于反应的操作。您只需要使用标准的反应技术即可向现有组件添加功能。因此，您可以创建一个包装TextInput的组件，从而使您可以传递TextInput接受的任何支持。并且，您也可以为组件提供其他道具，以满足其他需求。

import * as React from 'react';
import { 
  TextInput
} from 'react-native';

class CustomInput extends React.Component {

  constructor(props) {
    this.state = {text: 'default text'}
  }

  render(): JSX.Element {

    return (
      <TextInput
        {...this.props} // pass through props
        value={this.state.text}
        onChangeText={this.onChangeText} // update value as usual
        onChange={this.props.doSomethingSpecial} // call custom prop function for custom behaviour
      />
    ); 
  }

  onChangeText = (text) => {
    this.setState({text});
  }
}

export default CustomInput;

React-Native-如何替换React-Native核心组件的功能

1 个答案: