React Native 中的平台特定组件 [英] Platform specific components in React Native

问题描述

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

I'm pretty sure this is straightforward, but I can't quite see how to bring it together. At the moment my app works perfectly in iOS, but I've used a few controls which are not Android compatible:

<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 库来解决这个问题.我觉得我应该能够做这样的事情:

I want to use the React-Native-Segmented-Android library to fix this. I feel like I should be able to do something like:

<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 使用两个不同的文件，但如果可能的话，我宁愿将它们放在一起.

but that (perhaps unsurprisingly) doesn't work. Can anyone point me to the correct method? I know I can just use two different files for iOS/Android but I'd rather keep it together in one if possible.

推荐答案

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

I would create a sepeare component and this component would return segment according to platform but you can create an inner function as an alternative. call this function in render to handle decide which platform app runs and return segment according to platform.

_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>
 );
}

这篇关于React Native 中的平台特定组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！