리액트 네이티브에서 다이내믹한 스타일을 만들 수 있나요?

리액트 네이티브에서 다이내믹한 스타일을 만들 수 있나요?

다음과 같은 렌더링을 가진 구성 요소가 있다고 가정합니다.

<View style={jewelStyle}></View>

여기서 jewelStyle =

  {
    borderRadius: 10,
    backgroundColor: '#FFEFCC',
    width: 20,
    height: 20,
  },

배경색을 동적으로 랜덤하게 할당하려면 어떻게 해야 합니까?해봤어요

  {
    borderRadius: 10,
    backgroundColor: getRandomColor(),
    width: 20,
    height: 20,
  },

하지만 이렇게 하면 View의 모든 인스턴스가 동일한 색상을 가지므로 각각의 인스턴스가 고유해야 합니다.

팁이 있나요?

저는 보통 다음과 같은 일을 합니다.

<View style={this.jewelStyle()} />

...

jewelStyle = function(options) {
   return {
     borderRadius: 12,
     background: randomColor(),
   }
 }

보기가 렌더링될 때마다 새 스타일 객체가 연관된 임의 색상으로 인스턴스화됩니다.물론 이것은 컴포넌트가 다시 렌더링될 때마다 색상이 변경된다는 것을 의미하며, 이는 사용자가 원하는 색상이 아닐 수 있습니다.대신 다음과 같은 작업을 수행할 수 있습니다.

var myColor = randomColor()
<View style={jewelStyle(myColor)} />

...

jewelStyle = function(myColor) {
   return {
     borderRadius: 10,
     background: myColor,
   }
 }

네, 할 수 있습니다.실제로, 이 기능을 사용해 주세요.StyleSheet.create스타일을 만듭니다.

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';    

class Header extends Component {
    constructor(props){
        super(props);
    }    

    render() {
        const { title, style } = this.props;
        const { header, text } = defaultStyle;
        const combineStyles = StyleSheet.flatten([header, style]);    

        return (
            <View style={ combineStyles }>
                <Text style={ text }>
                    { title }
                </Text>
            </View>
        );
    }
}    

const defaultStyle = StyleSheet.create({
    header: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 3 },
        shadowOpacity: 0.4,
        elevation: 2,
        position: 'relative'
    },
    text: {
        color: '#0d4220',
        fontSize: 16
    }
});    

export default Header;

그 후:

<Header title="HOME" style={ {backgroundColor: '#10f1f0'} } />

그래도 이 서비스를 이용하려면StyleSheet.create역동적인 스타일도 있으니 한번 사용해 보세요.

const Circle = ({initial}) => {


const initial = user.pending ? user.email[0] : user.firstName[0];

    const colorStyles = {
        backgroundColor: randomColor()
    };

    return (
        <View style={[styles.circle, colorStyles]}>
            <Text style={styles.text}>{initial.toUpperCase()}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    circle: {
        height: 40,
        width: 40,
        borderRadius: 30,
        overflow: 'hidden'
    },
    text: {
        fontSize: 12,
        lineHeight: 40,
        color: '#fff',
        textAlign: 'center'
    }
});

어떻게 하면style의 특성View스타일시트를 동적 스타일과 결합하는 배열로 설정됩니다.

가장 쉬운 것은 내 것이다.

<TextInput
  style={[
    styles.default,
    this.props.singleSourceOfTruth ?
    { backgroundColor: 'black' } 
    : { backgroundColor: 'white' }
]}/>

구문적으로 문제가 좀 있었어이건 내게 효과가 있었다.

<Text style={[styles.textStyle,{color: 'red'}]}> Hello </Text>

const styles = StyleSheet.create({
   textStyle :{
      textAlign: 'center',   
      fontFamily: 'Arial',
      fontSize: 16
  }
  });

다음과 같은 것이 필요합니다.

var RandomBgApp = React.createClass({
    render: function() {

        var getRandomColor = function() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++ ) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        };

        var rows = [
            { name: 'row 1'},
            { name: 'row 2'},
            { name: 'row 3'}
        ];

        var rowNodes = rows.map(function(row) {
            return <Text style={{backgroundColor:getRandomColor()}}>{row.name}</Text>
        });

        return (
            <View>
                {rowNodes}
            </View>
        );

    }
});

이 예에서는 컴포넌트의 행 데이터가 포함된 행 배열을 텍스트컴포넌트의 배열에 매핑합니다.인라인 스타일을 사용하여getRandomColor새 텍스트 구성 요소를 만들 때마다 작동합니다.

코드의 문제는 스타일을 한 번 정의하면 getRandomColor는 스타일을 정의할 때 한 번만 호출된다는 것입니다.

늦은 감이 있지만, 아직 궁금하신 분들을 위해 간단한 해결책이 있습니다.

스타일 배열을 만들 수 있습니다.

this.state ={
   color: "#fff"
}

style={[
  styles.jewelstyle, {
  backgroundColor: this.state.BGcolor
}

두 번째는 스타일시트에 기재된 원래 배경색을 덮어씁니다.그런 다음 색상을 변경하는 기능이 있습니다.

generateNewColor(){
  var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
  this.setState({BGcolor: randomColor})
}

이렇게 하면 랜덤 16진수 색상이 생성됩니다.그럼 그 기능을 언제든지 불러서 새로운 배경색이라고 불러주세요.

사실, 너는 너의 이름을 쓸 수 있다.StyleSheet.create오브젝트는 함수 값을 가진 키로 올바르게 동작하지만 TypeScript에 유형 문제가 있습니다.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const SomeComponent = ({ bgColor }) => (
  <View style={styles.wrapper(bgColor)}>
    <Text style={styles.text}>3333</Text>
  </View>
);

const styles = StyleSheet.create({
  wrapper: color => ({
    flex: 1,
    backgroundColor: color,
  }),
  text: {
    color: 'red',
  },
});

  import React, { useContext, useMemo } from 'react';
  import { Text, StyleSheet, View } from 'react-native';
  import colors from '../utils/colors';
  import ThemeContext from './../contexts/ThemeContext';

  export default (props) => {
    const { theme } = useContext(ThemeContext);

    // Constructing styles for current theme
    const styles = useMemo(() => createStyles(theme), [theme]);

    return (
      <View style={styles.container}>
        <Text style={styles.label}>{label}</Text>
      </View>
    );
  };

  const createStyles = (theme: AppTheme) =>
    StyleSheet.create({
      container: { width: '100%', position: 'relative', backgroundColor: colors[theme].background },
      label: {
        fontSize: 13,
        fontWeight: 'bold',
      },
    });

컬러.ts

export type AppTheme = 'dark' | 'light';

const light: Colors = {
  background: '#FFFFFF',
  onBackground: '#333333',
  gray: '#999999',
  grayLight: '#DDDDDD',
  red: 'red',
};

const dark: Colors = {
  background: '#333333',
  onBackground: '#EEEEEE',
  gray: '#999999',
  grayLight: '#DDDDDD',
  red: 'red',
};

const colors = {
  dark,
  light,
  primary: '#2E9767',
  secondary: '#F6D130',
};

export default colors;

개체 확산 연산자 "..."을 사용하는 것이 효과적:

<View style={{...jewelStyle, ...{'backgroundColor': getRandomColor()}}}></View>

네, 역동적인 스타일을 만들 수 있어요.Components에서 값을 전달할 수 있습니다.

먼저 StyleSheetFactory.js를 만듭니다.

import { StyleSheet } from "react-native";
export default class StyleSheetFactory {
  static getSheet(backColor) {
    return StyleSheet.create({
      jewelStyle: {
        borderRadius: 10,
        backgroundColor: backColor,
        width: 20,
        height: 20,
      }
    })
  }
}

다음으로 컴포넌트를 다음과 같이 사용합니다.

import React from "react";
import { View } from "react-native";
import StyleSheetFactory from './StyleSheetFactory'
class Main extends React.Component {
  getRandomColor = () => {
    var letters = "0123456789ABCDEF";
    var color = "#";
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

  render() {
    return (
      <View>
        <View
          style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
        />
        <View
          style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
        />
        <View
          style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle}
        />
      </View>
    );
  }
}

<View 
 style={[styles.categoryItem,{marginTop: index <= numOfColumns-1 ? 10 : 0   }]}
>                                       

몇 가지 답이 있다는 것을 알지만, 가장 좋고 간단한 것은 "변화하는 것"을 사용하는 것이 국가의 목적이라고 생각합니다.

export default class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
          style: {
              backgroundColor: "white"
          }
      };
    }
    onPress = function() {
      this.setState({style: {backgroundColor: "red"}});
    }
    render() {
       return (
          ...
          <View style={this.state.style}></View>
          ...
       )
    }

}

상태 값을 스타일 객체에 직접 바인딩할 수 있습니다.다음은 예를 제시하겠습니다.

class Timer extends Component{
 constructor(props){
 super(props);
 this.state = {timer: 0, color: '#FF0000'};
 setInterval(() => {
   this.setState({timer: this.state.timer + 1, color: this.state.timer % 2 == 0 ? '#FF0000' : '#0000FF'});
 }, 1000);
}

render(){
 return (
   <View>

    <Text>Timer:</Text>
    <Text style={{backgroundColor: this.state.color}}>{this.state.timer}</Text>
  </View>
 );
 }
}

예를 들어 필터가 있는 화면을 사용하는 경우 필터가 선택되었는지 여부에 대한 필터의 배경을 설정하려면 다음을 수행합니다.

<TouchableOpacity style={this.props.venueFilters.includes('Bar')?styles.filterBtnActive:styles.filterBtn} onPress={()=>this.setFilter('Bar')}>
<Text numberOfLines={1}>
Bar
</Text>
</TouchableOpacity>

설정 필터:

setVenueFilter(filter){
  var filters = this.props.venueFilters;
  filters.push(filter);
  console.log(filters.includes('Bar'), "Inclui Bar");
  this.setState(previousState => {
    return { updateFilter: !previousState.updateFilter };
  });
  this.props.setVenueFilter(filters);
}

PS: ★★this.props.setVenueFilter(filters)입니다.this.props.venueFiltersstate.redex 입니다.

이런 것도 할 수 있어요.

컴포넌트:

const getRandomColor = () => {
  // you can use your component props here.
}

<View style={[styles.jewelStyle, {backgroundColor: getRandomColor()}]} />

스타일시트를 사용하여 스타일 만들기:

const styles = StyleSheet.create({
  jewelStyle: {
    backgroundColor: 'red',
  },
});

React-Native의 기능적 접근 방식을 따르고 있는 경우 문제를 정확히 해결하기 위해 라는 패키지를 사용할 수 있습니다.

// -- theme.js ------------------------------------------------------

// Initialization of a StyleSheet instance called 'styleSheet'
export const styleSheet = createStyleSheet({
    theme: /* optional theme */
});



// -- MyComponent.js -----------------------------------------------

// Create dynamic stylesheet that has access 
// to the previously specified theme and parameters
const useStyles = styleSheet.create(({theme, params}) => ({
    root: /* Dynamic Styles */,
    button: /* Dynamic Styles */,
    text: /* Dynamic Styles */,
}));

const MyComponent = (props) => {
    // Access dynamic styles using the created 'useStyles()' hook 
    // and specify the corresponding parameters
    const { styles } = useStyles({ color: props.color, fontSize: 10 });
    
    return (
      <div className={styles.root}>
          {/* */}
      </div>
    );
}

으로는 ""를 생성할 수 .dynamic합니다.hook★★★★★★ 。

-> 코드 & 박스

조건을 붙여야 하는 경우

 selectedMenuUI = function(value) {
       if(value==this.state.selectedMenu){
           return {
                flexDirection: 'row',
                alignItems: 'center',
                paddingHorizontal: 20,
                paddingVertical: 10,
                backgroundColor: 'rgba(255,255,255,0.3)', 
                borderRadius: 5
           }  
       } 
       return {
            flexDirection: 'row',
            alignItems: 'center',
            paddingHorizontal: 20,
            paddingVertical: 10
       }
    }

다음과 같은 이점이 있습니다.

render() {
  const { styleValue } = this.props;
  const dynamicStyleUpdatedFromProps = {
    height: styleValue,
    width: styleValue,
    borderRadius: styleValue,
  }

  return (
    <View style={{ ...styles.staticStyleCreatedFromStyleSheet, ...dynamicStyleUpdatedFromProps }} />
  );
}

어떤 이유에서인지, 이것이 내 것이 제대로 업데이트 될 수 있는 유일한 방법이었다.

리액트 네이티브에 스타일링된 컴포넌트를 사용할 수 있습니다.이것은 감성이나 웹에 스타일링된 컴포넌트와 같은 다이내믹한 스타일을 제공합니다.

비교적 간단한 경우에는 다음 방법을 사용할 수 있습니다.

StyleSheet.create({
    item: props.selectedId === item.id ? {
        backgroundColor: 'red',
    }: null
});

언급URL : https://stackoverflow.com/questions/29363671/can-i-make-dynamic-styles-in-react-native