Question

我正在尝试实现一个团队选择器组件来为我的本机应用程序选择国家和团队。为此，我完成了一个组件实现，其中包含2个幻灯片演示组件以选择一个国家和相关团队。在初始状态下，一切正常，但是当我按国家/地区箭头时，选择团队的幻灯片视图不可见。我正在使用以下幻灯片视图组件；

https://github.com/kristerkari/pinar

我的组件如下：

团队选择器组件；

export default class TeamSelectScreen extends Component {

  constructor(props) {
    super(props)
    this.state = {currentCountyIndex: 0, 
                  countries: [
                    {name: "england", logo: ""}, 
                    {name: "spain", logo: ""} 
                  ],
                  teams: [
                      [{name: "team1", logo : ""}, {name: "team2", logo : ""}, {name: "team3", logo : ""}],
                      [{name: "barca", logo : ""}, {name: "madrid", logo : ""}]
                    ] 
                }
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Select your team</Text>
        <Selector data={this.state.countries} onIndexChanged={(index) => {this.setState({currentCountyIndex : index})} }/>
        <Selector data={this.state.teams[this.state.currentCountyIndex]} onIndexChanged={(x) => {}}/>
      </View>
    )
  }
}

选择器组件；

export default class Selector extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    return (
      <Carousel 
      loop={true}
      onIndexChanged={(index) => {this.props.onIndexChanged(index.index)} }>
        {this.props.data.map((value, index) => {
          console.log("value :", value)
          return (
            <View key={value.name} style={styles.slide1}>
              <Text style={styles.text}>{value.name}</Text>
            </View>
          )
        })}
      </Carousel>
    )
  }
}

此外，我还附加了初始状态并按下了国家/地区按钮之后：

有什么主意吗？

谢谢。

Answer 1

我注意到您导出了默认的相同类名（TeamSelectScreen）。是两个单独的文件还是相同的文件？

为什么不渲染本机组件？

1 个答案: