[解決済み] React Nativeの条件付きスタイリング

質問

リアクトネイティブは初めてです。エラー発生時にTextInputのスタイルを変更しようとしています。

どうすれば、私のコードを醜くなくすることができますか？

<TextInput
      style={touched && invalid?
        {height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10, borderWidth: 2, borderColor: 'red'} :
        {height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10}}
</TextInput>

解決方法は？

使用方法 StyleSheet.create を使うと、このようなスタイル合成ができます。

に対してスタイルを作成します。 テキスト , 有効テキスト および 無効なテキスト .

const styles = StyleSheet.create({
    text: {
        height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10, 
    },
    textvalid: {
        borderWidth: 2,
    },
    textinvalid: {
        borderColor: 'red',
    },
});

を作成し、それらをスタイルの配列でグループ化します。

<TextInput
    style={[styles.text, touched && invalid ? styles.textinvalid : styles.textvalid]}
</TextInput>

配列スタイルの場合、同じキーは上書きルールで、後者は前者にマージされます。