React-native에서 요소를 반복하고 렌더링하는 방법은 무엇입니까?

Question

Render 함수에서 동일한 구성 요소를 반복 할 수 있습니까? 이 같은

뭔가 :

... 

onPress =() => { 
... 
}; 

initialArr = [["blue","text1"],["red","text2"]]; 
buttonsListArr = []; 

for (let i = 0; i < initialArr.length; i++) 
{ 
buttonsListArr.push(
    <Button style={{borderColor:{initialArr[i][0]}}} onPress={this.onPress.bind(this)}>{initialArr[i][1]}</Button> 
); 
} 

... 

render() { 
    return (
    <View style={...}> 
    {buttonsListArr} 
    </View> 
)}; 

나는이 구성 요소의 단지 유한 목록을 의미하므로 ListView에 /있는 ScrollView 등과 같은 구성 요소가이 특정한 경우에 적용 할 수 없습니다. 이것은 단지 구문 질문입니다.

Answer 1

일반적으로 그런 종류의지도를 사용합니다. 측면으로

buttonsListArr = initialArr.map(buttonInfo => (
    <Button ... key={buttonInfo[0]}>{buttonInfo[1]}</Button> 
); 

내가 대신 개체를 사용하는 것 (생성 된 구성 요소에 대한 고유 식별자로. 핵심 요구 반응에 당신이 매핑을 할 때마다 키가 필요한 소품입니다) 배열. 나는 보이는 찾을 좋네요 :

initialArr = [ 
    { 
    id: 1, 
    color: "blue", 
    text: "text1" 
    }, 
    { 
    id: 2, 
    color: "red", 
    text: "text2" 
    }, 
]; 

buttonsListArr = initialArr.map(buttonInfo => (
    <Button ... key={buttonInfo.id}>{buttonInfo.text}</Button> 
); 

Answer 2

render() { 
    return (
    <View style={...}> 
     {initialArr.map((prop, key) => { 
     return (
      <Button style={{borderColor: prop[0]}} key={key}>{prop[1]}</Button> 
     ); 
     })} 
    </View> 
) 
} 

로 다음 인덱스에 대해 걱정하지 않습니다 트릭 초기 배열

Answer 3

대신 배열을보다 효율적으로 사용할 객체를 수행해야하며이 될 것입니다 훨씬 더 분명 무슨 일이 무엇인지 :

실제 맵핑의

const initialArr = [{ 
    color: "blue", 
    text: "text1" 
}, { 
    color: "red", 
    text: "text2" 
}]; 

가 대신 루프의 JS 배열지도를 사용 - 실제 배열이 특정 납입 뭔가를 표시처럼, 정의없는 상태 루프가 경우에 사용되어야한다 위해 ber of times :

나는 가독성이 뛰어난 코드를 위해 렌더링 방식을 벗어난 함수로 매핑을 이동했습니다. 반응 네이티브의 요소 목록을 반복하는 다른 많은 방법이 있으며 사용 방법은 무엇을해야하는지에 따라 다릅니다. 이 방법의 대부분은 this article about React JSX loops에 있으며 React 예제를 사용하고 있지만 React Native에서이 모든 것을 사용할 수 있습니다. 이 주제에 관심이 있다면 확인해보십시오!

또한 루핑 주제가 아니라 onPress 함수를 정의 할 때 이미 배열 구문을 사용하고 있으므로 다시 바인딩 할 필요가 없습니다. 화살표 구문이 함수를 자동 바인드하므로 함수는 구성 요소 내에서이 구문을 사용하여 정의 된 경우에만 적용됩니다.