Question

如何在单击每个标题时更改以下内容 1）文字颜色和下划线 2）下面显示的数据

这个想法是让用户点击文本，然后切换下面改变文本的数据。我知道状态必须以某种方式使用辅助函数，如onClick。但如果有人能够具体解释那就太好了。感谢

这是我目前的代码//

export default class ExploreSection extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

     current: 0,
      mainText: "This is About"
    };
  }
  onPressTitle = index => {
    switch (index) {
      case 0:
        this.setState({ mainText: "This is About", current: 0 });
      case 1:
        this.setState({ mainText: "This is Detail", current: 1 });
      case 2:
        this.setState({ mainText: "This is People", current: 2 });
    }
  };


  render() {
    var style0 =
      this.state.current === 0 ? styles.selectedStyle : styles.normalStyle;
    var style1 =
      this.state.current === 1 ? styles.selectedStyle : styles.normalStyle;
    var style2 =
      this.state.current === 2 ? styles.selectedStyle : styles.normalStyle;
    return (

      <View>
        <View style={styles.middleBar}>
          <Text
            style={style0}
            onPress={() => {
              this.onPressTitle(0);
            }}
          >
            About
          </Text>
          <Text
            style={style1}
            onPress={() => {
              this.onPressTitle(1);
            }}
          >
            Detail
          </Text>
          <Text
            style={style2}
            onPress={() => {
              this.onPressTitle(2);
            }}
          >
            People
          </Text>
        </View>
        <View style={styles.details}>
          <Text style={{ fontSize: 14, letterSpacing: 2, lineHeight: 20 }}>
            Hey Guys! Its me jack, I would like to invite you guys for my BBQ
            party! Its been so long and it would be awesome to catch up with all
            of you guys. So whoever can make it please come!
          </Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  details: {
    //  flex: 5,
    paddingHorizontal: 10,
    paddingTop: 20
  },

  middleBar: {
    //  flex: 1.2,
    backgroundColor: "#fafafa",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center"
  },
  selectedStyle: {
    fontSize: 16,
    color: "#FC0764"
  },
  normalStyle: {
    fontSize: 16
  }
});

Answer 1

在react-native中，Text组件具有“onPress”道具，您可以将其设置为。最简单的方法是为3个标题设置onPress，并根据按下的标题更改底部文本。例如：

创建this.state和更改它的函数：

this.state = {current: 0, mainText: 'This is About'};


onPressTitle=(index)=>{
   switch(index){
     case 0: 
        this.setState({mainText: 'This is About', current: 0})
        break;
     case 1:
        this.setState({mainText: 'This is Detail', current: 1})
        break;
     case 2: 
        this.setState({mainText: 'This is People', current: 2})
        break;
   }
}

然后在渲染标题时，检查状态中的当前值以设置标题的样式：

var style0 = this.state.current === 0? selectedStyle : normalStyle;
var style1 = this.state.current === 1? selectedStyle : normalStyle;
var style2 = this.state.current === 2? selectedStyle : normalStyle;

<Text style={style0} onPress={()=>{this.onPressTitle(0}}>About</Text>
<Text style={style1} onPress={()=>{this.onPressTitle(1}}>Detail</Text>
<Text style={style2} onPress={()=>{this.onPressTitle(2}}>People</Text>

并渲染文字：

<Text>{this.state.mainText}</Text>

Answer 2

使用最大代码重用来处理此问题的一种简洁方法是创建一个“Tab”组件，用于管理每个Tabs的状态。然后，您的页面将重用Tab组件并显示当前文本。以下是我如何设置Tab组件

<强> Tab.js

export default class Tab extends Component {
    state = {
        isSelected: false,
    }

    static propTypes = {
        title: PropTypes.string,
        text: PropTypes.string,
        onPress: PropTypes.func.isRequired,
    }

    onPress() {
        this.props.onPress(this.props.text);
    }

    render() {
        var style = this.state.isSelected ? selectedStyle : normalStyle;
        return <Text 
                  style={style} 
                  onPress={() => this.onPress()}>
                  {this.propstitle}
               </Text>

    }
}

现在，在您的Page组件中，您可以初始化3个选项卡，它应该或多或少地处理自己

<强> Page.js

export default class Page extends Component {
    state = {
        mainText = "Select a tab"
    }

    onTabPress(tabText) {
        this.setState({mainText: tabText});
    }

    render() {
        return (
            <View>
                <Tab title="About" text="stuff" onPress={this.onTabPress}/>
                <Tab title="Detail" text="stuff" onPress={this.onTabPress}/>
                <Tab title="People" text="stuff" onPress={this.onTabPress}/>
                {this.state.mainText}
            </View>
        )
    }
}

现在Tab的状态和呈现都由Tab本身处理，Page可以干净利用Tabs来实现目标。

React-native组件状态数据

2 个答案: