どのようにデフォルトのスタイルとユーザー定義のスタイルを設定するには、ネイティブで動的に反応しますか？

Question

私の反応するネイティブAppでは、というRoundImageComponentという共有コンポーネントを追加しようとしています。とRoundImageComponent.styleを追加してCSSスタイルを追加しました。このRound画像コンポーネントを使用する場合、アプリケーションの要件に従って、画像の幅が小道具として渡されます。いくつかのケースでは、幅は、以下

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; 

ユーザーが小道具として幅を渡すと、画像の幅がデフォルトの幅にオーバーライドする必要があります。それ以外の場合、画像の幅はデフォルト幅のままにしてください。 このようにすることは可能ですか？

Answer 1

に役立ちます願っています。私CustomTextComponentとしてこれを仮定します

export CustomTextComponent = (props)=>{ 
    return (
     <Text style={[{fontFamily:"Lato", color:"#000", ...props.style}]}> 
       {props.children} 
     </Text> 
    ) 
} 

今、私は別のレベルで異なる色を設定したいことはred​​

<CustomTextComponent style={{color:'green'}}> 
      red colored text 
</CustomTextComponent> 

ため

<CustomTextComponent style={{color:'red'}}> 
      red colored text 
</CustomTextComponent> 

、次いで

を赤と緑の言うことができます

注：...props.styleはデフォルトのスタイリングの後にする必要があります。あなたが最後に言及したものが前のものを上書きするからです。 また、いくつかのケースでdefault props valueを利用することができます（PropsType libに）

Answer 2

はい、可能です。

現在のスタイルの小道具を、その直後に別のスタイルを渡すことで上書きすることができます。それは次のようになります：

const styles = StyleSheet.create({ 
    default: { 
    backgroundColor: red, 
    color: blue, 
    }, 
}); 

<View> 
    <DefaultComponent style={styles.default} /> 
    <CustomComponent style={[styles.default, { backgroundColor: none }]} /> 
</View> 

は、これはスタイルに小道具を渡すことも可能である