React native React Native app-当数据源更改时，NativeBase DeckSwiper不会立即重新呈现_React Native_Native Base

React native React Native app-当数据源更改时，NativeBase DeckSwiper不会立即重新呈现

react-native

React native React Native app-当数据源更改时，NativeBase DeckSwiper不会立即重新呈现,react-native,native-base,React Native,Native Base,我正在使用NativeBase中的Picker和DeckSwiper，当我从Picker菜单中选择不同的主题时，它会更新数据源在DeckSwiper组件上读取的状态，该组件应重新渲染以显示新内容。当前仅当第一张卡被刷卡时才重新渲染。如何在状态更改后立即重新渲染？是一个GIF，显示当前的工作方式这是密码 const Item = Picker.Item; const topics = [ { label: "topic 1", value: "1" }, { label: "topic

我正在使用NativeBase中的Picker和DeckSwiper，当我从Picker菜单中选择不同的主题时，它会更新数据源在DeckSwiper组件上读取的状态，该组件应重新渲染以显示新内容。当前仅当第一张卡被刷卡时才重新渲染。如何在状态更改后立即重新渲染？是一个GIF，显示当前的工作方式

这是密码

const Item = Picker.Item;

const topics = [
  { label: "topic 1", value: "1" },
  { label: "topic 2", value: "2" },
  { label: "topic 3", value: "3" }
];

const cards = [
  { text: "Card A", topicId: "1", name: "One" },
  { text: "Card B", topicId: "2", name: "Two" },
  { text: "Card C", topicId: "3", name: "Three" },
  { text: "Card D", topicId: "1", name: "Four" },
  { text: "Card E", topicId: "2", name: "Five" },
  { text: "Card F", topicId: "3", name: "Six" }
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "1",
      topics: topics,
      cards: cards
    };
  }
  onValueChange(value: string) {
    this.setState({
      selected: value,
      cards: cards.filter(item => item.topicId === value)
    });
  }
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Form>
            <Picker
              iosHeader="Select one"
              mode="dropdown"
              selectedValue={this.state.selected}
              onValueChange={this.onValueChange.bind(this)}
            >
              {this.state.topics.map((topic, i) => {
                return <Item label={topic.label} value={topic.value} key={i} />;
              })}
            </Picker>
          </Form>
          <View>
            <DeckSwiper
              ref={c => (this._deckSwiper = c)}
              dataSource={this.state.cards}
              renderItem={item => (
                <Card style={{ elevation: 3 }}>
                  <CardItem>
                    <Left>
                      <Body>
                        <Text>{item.text}</Text>
                        <Text>Topic{item.topicId}</Text>
                      </Body>
                    </Left>
                  </CardItem>
                  <CardItem cardBody>
                    <Image
                      style={{ height: 300, flex: 1 }}
                      source={{
                        uri:
                          "http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"
                      }}
                    />
                  </CardItem>
                </Card>
              )}
            />
          </View>
        </Content>
        <View style={{ flexDirection: "row", flex: 1, position: "absolute", bottom: 50, left: 0, right: 0, justifyContent: 'space-between', padding: 15 }}>
        <Button iconLeft onPress={() => this._deckSwiper._root.swipeLeft()}>
          <Text>Swipe Left</Text>
        </Button>
        <Button iconRight onPress={() => this._deckSwiper._root.swipeRight()}>
          <Text>Swipe Right</Text>
        </Button>
      </View>
      </Container>
    );
  }
}

const Item=Picker.Item；
常量主题=[
{标签：“主题1”，值：“1”}，
{标签：“主题2”，值：“2”}，
{标签：“主题3”，值：“3”}
];
常数卡=[
{文本：“卡片A”，主题：“1”，名称：“一”}，
{文本：“卡B”，主题：“2”，名称：“2”}，
{文本：“卡C”，主题：“3”，名称：“3”}，
{文本：“卡片D”，主题：“1”，名称：“四”}，
{文本：“卡片E”，主题：“2”，名称：“五”}，
{文本：“卡片F”，主题：“3”，名称：“6”}
];
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
选定：“1”，
主题:主题,，
卡片：卡片
};
}
onValueChange（值：字符串）{
这是我的国家({
所选：值，
卡片：cards.filter（item=>item.topicId==value）
});
}
render（）{
返回(
{this.state.topics.map（（topic，i）=>{
返回；
})}
（这个._deckSwiper=c）}
dataSource={this.state.cards}
renderItem={item=>(
{item.text}
主题{item.topicId}
)}
/>
此.\u deckSwiper.\u root.swipleft（）}>
左击
这个。_deckSwiper。_root.swipeRight（）}>
状态栏从左向右划
);
}
}