React Native 中的平台特定组件

我很确定这很简单，但我不太明白如何将它们结合在一起。目前我的应用程序在 iOS 中运行良好，但我使用了一些与 Android 不兼容的控件：

<View style={containerStyle}>
  <Text style={labelStyle}>Drink:</Text>
  <SegmentedControlIOS
    tintColor={styleBackground}
    style={{ flex: 2 }}
    values={['Value1', 'Value2']}
    selectedIndex={this.state.drink}
    onChange={(event) => {
      this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
    }}
  />
  <View style={{ flex: 1 }} />
</View>

我想使用React-Native-Segmented-Android https://www.npmjs.com/package/react-native-segmented-android库来解决这个问题。我觉得我应该能够做类似的事情：

<View style={containerStyle}>
  <Text style={labelStyle}>Drink:</Text>
  const Component = Platform.select({
      ios: () => require('SegmentedControlIOS'),
      android: () => require('react-native-segmented-android'),
  })(      
    tintColor={styleBackground}
    style={{ flex: 2 }}
    values={['Value1', 'Value2']}
    selectedIndex={this.state.drink}
    onChange={(event) => {
      this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
    }}
  />);
  <View style={{ flex: 1 }} />
</View>

但这（也许并不奇怪）不起作用。谁能指出我正确的方法？我知道我可以在 iOS/Android 上使用两个不同的文件，但如果可能的话，我宁愿将它们放在一个文件中。

我将创建一个 sepeare 组件，该组件将根据平台返回段，但您可以创建一个内部函数作为替代方案。在渲染中调用此函数来处理决定哪个平台应用程序运行并根据平台返回段。

_segmentPicker() {
        if (Platform.OS == 'android') {
          return (
              <SegmentedControlIOS
        tintColor={styleBackground}
        style={{ flex: 2 }}
        values={['Value1', 'Value2']}
        selectedIndex={this.state.drink}
        onChange={(event) => {
          this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
        }}
      />
            );
        } else if (Platform.OS == 'ios') {
      return (
           <SegmentedControlIOS
        tintColor={styleBackground}
        style={{ flex: 2 }}
        values={['Value1', 'Value2']}
        selectedIndex={this.state.drink}
        onChange={(event) => {
          this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
        }}
      />
            );
    }
  }


render(){
 return (
  <View>
   {this._segmentPicker()}
   .
   .
  </View>
 );
}