如何在react-native中引用自定义组件？

Question

所以我有一个这样的自定义组件：

class MyComponent extends React.Component {
  render() {
    return (
      <TouchableHighlight style={this.props.buttonStyle}>
        <Text style={styles.buttonText}>Button</Text>
      </TouchableHighlight>
    );
  }
}

我使用这样的组件：

class RootView extends React.Component {
  render() {
    return (
      <View>
        <MyComponent/>
        <MyComponent/>
      </View>
    );
  }
}

RootView可调整大小。当MyComponent足够小时，我想要做的就是缩小它的孩子RootView。我需要一次缩小每个MyComponent：当RootView足够小时缩小第一个MyComponent，当第一个MyComponent达到最小尺寸时缩小第二个MyComponent。 我知道react-native中有refs，但它似乎不适用于自定义组件。

Answer 1

1. 您可以将ref添加到自定义组件：

   <Separator ref='sep' style={styles.offsetSeparator} />

   

所以你应该能够做你需要的。

1. 然而，当你发现自己在不同组件之间有很强的依赖关系时，这意味着它可能是开始使用Flux或类似东西的好时机，然后将数据保存在Store中，它将保存所有3所需的所有信息。组件。有关Flux的更多信息，请访问：https://facebook.github.io/flux/