React-Nativeリストの最初の要素は、境界線のない画面に表示されます

Question

AndroidでReactネイティブコードを実行すると、アイテムのリストが表示されます。私はリストの最初の要素を画面の中央に置こうとしています。

私はこのコンポーネント

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, 
    } 
}); 

を作成しかし、問題は、最初の項目が画面の中央にないことである。

中心に複数の画像を移動するには、Iを添加これまでのスタイル：

{paddingLeft: "15%"} 

今、

これは、スタートのために良いように見えますが、私は、リストを右方向にスクロールすると、左側の境界線が消えない：イメージはこのようになります。

リストの最初の要素を中央に配置する方法はありますか？あなたは2番目の項目までスクロールしたときに、条件付きスタイルを作ってみませんなぜ

Answer 1

...

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

はその後、this.setState({isFirstItem: false})