リアクタネイティブのプラットフォーム固有のコンポーネント

Question

これは簡単なことだとは思いますが、どうやってそれをまとめるのかは分かりません。現時点では私のアプリは、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ライブラリを使用します。

<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用に2つの異なるファイルを使用することができますが、可能であれば1つにまとめることをお勧めします。

Answer 1

私は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> 
); 
}