weex模块选项功能

        <View style={style.nav}>
          {this.state.title.map((item, index) => {
            return (
              <View
                ref={`index${index}`}
                onTouchStart={this.addclass.bind(this, index)}
                style={style.navList}
              >
                <Text
                  style={[
                    style.text,
                    this.state.current === index ? [style.bgc] : ""
                  ]}
                >
                  {item.title}
                </Text>
              </View>
            );
          })}
        </View>
        <View>
          <View>
            {this.state.title.map((item, index) => {
              return (
                <View style={{ alignItems: "center" }}>
                  {this.state.current === index ? item.title : ""}
                </View>
              );
            })}
          </View>
        </View>

  state = {
    current: 0,
    title: [
      {
        title: "标准"
      },
      {
        title: "经典"
      },
      {
        title: "开放式"
      }
    ]
  };

  addclass(idx) {
    this.setState({ current: idx });
  }

.container {
  background-color: #fff;
  width: 750;
  height: 750;
  flex-direction: column;
  align-content: center;
}
.box1 {
  width: 100;
  height: 100;
  background-color: red;
}
.box2 {
  position: absolute;
  top: 200;
  left: 200;
  width: 100;
  height: 100;
  background-color: blue;
}

.container {
  /* background-color: #fff; */
  width: 750;
  height: 1000;
  flex-direction: column;
  align-content: center;
  padding-top: 110;
}
.nav {
  padding-top: 30px;
  width: 750;
  flex-direction: row;
  justify-content: space-around;
}
.navList {
  width: 150;
  height: 50;
  line-height: 50;
  align-items: center;
  background-color: #ccc;
  border-radius: 20px;
  flex-direction: row;
  justify-content: space-around;
}
.text {
  width: 150;
  height: 50;
  justify-content: center;
  align-items: center;
  font-size: 24;
  list-style: none;
  text-decoration: none;
  border-radius: 20px;
  text-align:center;
  line-height: 50;
}
.wrap {
  margin-top: 20px;
  width: 750;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
}
.wrapList {
  width: 750;
}
.bgc {
  justify-content: center;
  align-items: center;
  background-color: red;
  line-height: 50;
  color: white;
  text-align:center
}
.show {
  display: flex;
}
.hidden {
  display: none;
}