React 스타일 배열 내부에 네이티브 매핑 된 배열 객체가 있습니까?

Question

이제는 몇 시간 동안 아무런 주사위도없이 이것을 해결하려고 노력했습니다. 스타일 배열을 제외한 모든 것이 작동합니다. 스타일 배열에 매핑 된 배열 객체를 포함하는 방법을 모르십니까?

오류 : Failed prop type: Invalid props.style...

그래서 <Text Style={ 배열 형식이 올바르지 않습니다하지만 난 그것을 변환 할 수있는 올바른 구문을 모른다. 어떤 도움이라도 대단히 감사합니다.

const navTabs = [ {label: 'Home'}, {label: 'Next'} ] 
const { Home, Next } = styles 

{navTabs.map(x => 
<TouchableOpacity key={x.label} onPress={() => navigate(`${x.label}`)}> 
<Text style={ [ navTxt, `${x.label}` ] }> {x.label} </Text> 
</TouchableOpacity>)} 

const styles = { navTxt:{backgroundColor:'#000', paddingHorizontal: 5}, Home:{color: 'red'}, Next:{color: 'white'} } 

Answer 1

가 나를 위해 이상한 모양 솔직히 말해서,하지만이 당신이

업데이트를 달성하고 싶은 생각 : 당신이 할 수있는 해결 방법이있다,

render() { 
const navTabs = [ 
    { label: 'Home' }, 
    { label: 'Next' }, 
]; 
const styles = { 
    Home: { 
    color: 'rgb(255, 0, 0)', 
    }, 
    Next: { 
    color: 'rgb(0, 0, 0)', 
    }, 
    navTxt: { 
    backgroundColor: 'rgb(0, 255, 0)', 
    }, 
}; 

return (
    {navTabs.map(x => 
      <TouchableOpacity key={x.label} onPress={() => {}}> 
      <Text style={{ ...styles.navTxt, ...styles[x.label] }}> {x.label} </Text> 
      </TouchableOpacity> 
     )} 
); 
} 

을 다음과 같은

Answer 2

스타일 어레이의 각 요소는 개체 또는 스타일 시트 중 하나이어야한다. 이런 식으로 뭔가 :

style = StyleSheet.create({ navTxt: { color: 'red' } }) 

<Text style={ [ style.navTxt, { label: x.label } ] }> {x.label} </Text>