これは簡単なことだと確信していますが、どのように組み合わせるかはよくわかりません。現時点では、私のアプリは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つにまとめたいと思います。
別のコンポーネントを作成すると、このコンポーネントはプラットフォームに応じてセグメントを返しますが、代わりに内部関数を作成することもできます。レンダリングでこの関数を呼び出して、実行するプラットフォームアプリを決定し、プラットフォームに応じてセグメントを返します。
_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>
);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加