React-Native 목록의 첫 번째 요소가 영구 테두리가없는 화면에 표시됩니다.

Question

Android에서 React Native 코드를 실행할 때 각 항목에 연결된 이미지가있는 항목 목록이 있습니다. 목록의 첫 번째 요소를 화면 가운데에 표시하려고합니다.

내가이 구성 요소

export default class AwesomeProject extends Component { 
    render() { 
    return (
     <View style={styles.container} > 
     <List 
      Items={Items} 
      align-items="right" 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#000000', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    } 
}); 

를 생성하지만 문제는 첫 번째 항목이 화면의 중앙에되지 않는 것입니다 :

중앙에 더 많은 이미지를 이동하려면, 내가 추가 스타일 :

{paddingLeft: "15%"} 

이제는 이미지는 다음과 같습니다

이

이것은 시작에 좋아 보인다,하지만 난 목록을 오른쪽으로 스크롤, 왼쪽의 경계가 사라지지 않습니다.

왼쪽에 영구적 인 테두리가 없어도 목록의 첫 번째 요소를 가운데 정렬하는 방법에 대한 아이디어가 있습니까? 두 번째 항목으로 스크롤 할 때 조건부 스타일을 시도하지 않는 이유는

Answer 1

...

{paddingLeft: this.state.isFirstItem && "15%"} 

그런 다음 this.setState({isFirstItem: false})