Reactネイティブの子コンポーネントを設定する

Question

親コンポーネントからProactを介してReact Nativeの子にデータを送信しようとしました。 Parent Component

<Card> 
 
    <CardSection> 
 
    <Input 
 
     proportion={5} 
 
     label="Email" 
 
    /> 
 
    </CardSection> 
 
    <CardSection> 
 
    <Input 
 
     proportion={3} 
 
     label="Password" 
 
    /> 
 
    </CardSection> 
 
</Card>

Children Component

const Input = ({ proportion, label }) => { 
 
    const { inputStyle } = styles; 
 
    inputStyle.flex = proportion; 
 

 
    return (
 
    <View style={containerStyle}> 
 
     <Text>{label}</Text> 
 
     <TextInput style={inputStyle} /> 
 
    </View> 
 
); 
 
}; 
 

 
const style = { 
 
    inputStyle: { 
 
    flex: 2 
 
    } 
 
};

そして、私はエラーYou attempted set the key 'flex' with the value '3' on an object that is meant to be immutable and has been frozenを持っています。面白い事実、私が1つを持っているとき<Input /> Componentすべてがうまく動作し、flex: 5を設定し、私が望むものに到達しますが、秒で<Input /> Component私はエラーを持っています。どのように私はこれを修正し、適切に設定できますか？

Answer 1

私は良い方法は、対象の広がり演算子を使用することであると思う：

const Input = ({ proportion, label }) => { 
    const { inputStyle } = styles; 

    return (
    <View style={containerStyle}> 
     <Text>{label}</Text> 
     <TextInput style={{...inputStyle, flex: proportion}} /> 
    </View> 
); 
}; 

const style = { 
    inputStyle: { 
    flex: 2 
    } 
}; 

あなたはconstのようなスタイルを定義するので、あなたは、エラーが発生します。 letで変数のように定義することもできます。