Question

我正在使用NativeBase中的Picker和DeckSwiper，当我从Picker菜单中选择一个不同的主题时，它会更新DeckSwiper组件上dataSource读取的状态，该状态应重新呈现以显示新内容。目前只有刷卡时才会重新呈现。一旦状态发生变化，我怎样才能重新渲染？ Here是一个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>
    );
  }
}

React Native应用程序 - 当dataSource更改时，NativeBase DeckSwiper不会立即重新呈现

0 个答案: