私のReactNativeアプリでは、RoundImageComponentという共有コンポーネントを追加し、Cssスタイルを追加するためにRoundImageComponent.styleを追加しようとしています。この丸い画像コンポーネントを使用する場合、画像の幅は、アプリケーションの要件に従って小道具として渡されます。場合によっては、次のように幅がコンポーネントタグに追加されません。
RoundImageComponent width={90} roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />
または
RoundImageComponent roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />
RoundImageComponentコード
import React from 'react';
import {
Text,
View,
} from 'react-native';
import Config from 'react-native-config';
import SplashScreen from 'react-native-splash-screen';
import RoundImageComponent from "./shared/avatar/RoundImageComponent";
import styles from './App.styles';
const resolveSession = async () => {
// const session = sessionActions.getSession();
SplashScreen.hide();
};
setTimeout(() => {
resolveSession();
}, 2000);
const App = () => (
<View style={styles.container}>
<RoundImageComponent width={90}roundImage="https://media.wired.com/photos/593222b926780e6c04d2a195/master/w_2400,c_limit/Zuck-TA-AP_17145748750763.jpg" />
</View>
);
export default App;
RoundImageComponent
import {
StyleSheet,
} from 'react-native';
import { container, primaryText } from '../../theme/base';
export const defaultImage = {
height: 100,
borderRadius: 50,
width: 100
}
const styles = StyleSheet.create({
container: {
...container,
},
userDefinedImage: {
...defaultImage,
width: 40
}
});
export default styles;
ユーザーが幅をpropとして渡す場合、画像の幅はデフォルトの幅に上書きされ、そうでない場合は画像の幅はデフォルトの幅のままになります。この方法で行うことは可能ですか？
これは、小道具をスタイルに渡すことで可能になります。これを私のとしましょうCustomTextComponent：
export CustomTextComponent = (props)=>{
return (
<Text style={[{fontFamily:"Lato", color:"#000", ...props.style}]}>
{props.children}
</Text>
)
}
今、私は異なるレベルで異なる色を設定したいと思います次に赤と緑としましょう
ために red
<CustomTextComponent style={{color:'red'}}>
red colored text
</CustomTextComponent>
ために green
<CustomTextComponent style={{color:'green'}}>
red colored text
</CustomTextComponent>
注：あなた...props.styleはあなたのデフォルトのスタイリングの後にあるべきです。あなたの最後に言及したものが前のものを上書きするからです。default props value場合によっては利用することもできます。（lib PropsType）
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加