android - Platform specific components in React Native -
i'm pretty sure straightforward, can't quite see how bring together. @ moment app works in ios, i've used few controls 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>
i want use react-native-segmented-android library fix this. feel should able 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>
but (perhaps unsurprisingly) doesn't work. can point me correct method? know can use 2 different files ios/android i'd rather keep in 1 if possible.
i create sepeare component , component return segment according platform can create inner function alternative. call function in render handle decide platform app runs , return segment according 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> ); }
Comments
Post a Comment