React Native의 플랫폼 특정 구성 요소

Question

저는 이것이 간단하다는 것을 확신합니다. 그러나 그것을 함께 모으는 방법을 꽤 볼 수는 없습니다. 순간 내 응용 프로그램은 아이폰 OS에서 완벽하게 작동,하지만 난 호환되는 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 용으로 두 가지 파일을 사용할 수 있지만 가능하면 가능하면 하나의 파일로 유지하려고합니다.

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