Question

我正在尝试在ReactNative中创建一个可重复使用的按钮。为此，我创建了一个无状态组件，它返回一个TouchableHighlight组件，该组件可通过传递给可重用组件的props进行配置。

OutlineButton.js

const OutlineButton = ({color, text, onClick}) => {
  let buttonStyles = (
    color ?
      _.assign({}, StyleSheet.flatten(styles.button), {borderColor: color}) :
      styles.button
  )

  return (
    <TouchableHighlight style={buttonStyles} onPress={onClick}>
      <Text style={styles.text}>{text}</Text>
    </TouchableHighlight>
  )
};

CategoryButton.js

import OutlineBtn from '../buttons/outlineButton.js'
const CategoryButton = ({merchant}) => (
    let text = merchant ? merchant.category : '';
  <View style={styles.buttonContainer}>
    <OutlineBtn
      color="red"
      text={text.split('_').join(' ')} />
  </View>
);

Transaction.js（活动页面）

import Category from '../components/singleTransaction/categoryButton.js'
class Transaction extends React.Component {
    constructor (props) {
        super(props)
        this.state = {}
    }

    componentDidMount () {
        this.props.getTransaction(this.props.transactionId);
    }

    render () {
        return (
            <ScrollView>
                <Category ref="touchbtn" merchant={this.state.merchant} />
            </ScrollView>
        )
    }
}

但是，当我尝试使用此组件时，我收到警告Touchable child must either be native or forward setNativeProps to a native component

我做错了什么？

注意：我知道如果setNativeProps()的子项不是本机组件，则需要传递TouchableHighlight方法（例如{{1} }或<View>）。但就我而言，<Text>的孩子确实是一个本土组成部分。

Answer 1

因此，从我发现的情况来看，这是无状态功能组件的限制。：（

即，当您的函数返回本机组件时......在使用时，它本身并不是本机组件。如果我想在<Touchable...>中使用功能原生组件，我的选择是：

将无状态组件包装在调用者的<View>中，这是一个本机组件
将无状态功能组件重写为基于类的组件（即extends React.Component）

Answer 2

为时已晚，但使用无状态组件可以将事件声明为您自己的组件，例如：

"=m"

Answer 3

由于我想在TouchableHighlight中使用无状态组件，我唯一的选择是将无状态组件包装在视图中：

<TouchableHighlight onPress={() => { this._pressRow(); }} >
    <View>
         <StatelessItem data={_data}/>
    </View>
</TouchableHighlight>

如何使用TouchableHighlight作为可重用的组件

3 个答案: