javascript - 动态添加的view没有样式功能React Native

Question

我在我的应用程序中使用轮播(取自此处 https://github.com/nick/react-native-carousel )

我试图在每次用户向右滑动时添加一个 View 。

这是我正在使用的代码:

export default class AllRand extends Component
{ 

  constructor(props)
  {    
    super(props);
    this.state = 
    {
      myArr: ['Page numebr: ', 'Page numebr: ']
    };
  } 

  _onPageSwitchAnimateEnd()
  {
    this.state.myArr.push('Page numebr: ')
    this.setState({
        myArr: this.state.myArr
    })
  }

  render()
  {    
    let Arr = this.state.myArr.map((text, index) => {
      return <View key={ index } style={ styles.shit1 }><Text>asdasd { index }</Text></View>                            
    })      

    return (
      <Carousel animate={false} hideIndicators={false} onPageChange={() => this._onPressOut()}>
        { Arr }
      </Carousel>
    );
  }
}

我成功添加了一个 View ，但它的样式、文本“页码:”和索引不正确...

更新:

更改了我的代码，但仍然不起作用...

'use strict';

import React, { Component } from 'react';

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

import Carousel from 'react-native-carousel';
import FactsApiFetcher from './facts-api-handler/facts-api-fetcher'

export default class AllRand extends Component
{ 

  constructor(props)
  {    
    const InitialnumberOfPages = 2;

    super(props);
    this.state = 
    {
      numberOfPages: InitialnumberOfPages,
      Pages: this._setInitialPages(InitialnumberOfPages)
    };
  } 

  _onPageSwitchAnimateEnd()
  {    
    let updatedNumberOfPages = this.state.numberOfPages + 1;
    let newArr = this._addPage(updatedNumberOfPages);

    this.setState({        
        numberOfPages: updatedNumberOfPages,        
        Pages: newArr
    });
  }

  render()
  {   
    return (
      <Carousel animate={false} hideIndicators={false} onPageChange={() => this._onPageSwitchAnimateEnd()}>
        { this.state.Pages }
      </Carousel>
    );
  }

  _setInitialPages(numberOfPages)
  {
    let tempArr = [];

    for(let i = 0; i < numberOfPages; i++)
    {
      tempArr.push(<View key={ i } style={ styles.shit1 }><FactsApiFetcher/></View>);
    }   

    return tempArr;
  }

  _addPage(updatedNumberOfPages)
  {    
    return this.state.Pages.concat([<View key={ updatedNumberOfPages - 1 } style={ styles.shit1 }><FactsApiFetcher/></View>]);    
  }
}

const styles = StyleSheet.create({
  shit1: {
    alignSelf: 'stretch',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFF00'
  }
});

AppRegistry.registerComponent('AllRand', () => AllRand);

Answer 1

所以最终问题是因为我使用的 Carousel 库中有一个错误( https://github.com/nick/react-native-carousel )。由于某种原因，添加页面的回调函数弄乱了页面数组(不知道为什么......)。]

当我尝试使用另一个 Carousel 库时，该功能有效。

根据这次经历，我能给出的唯一建议是，当您认为您尝试了所有可能性来修复错误时，请尝试更改您正在使用的库(更改为另一个相同功能的库)。