React-native组件状态数据

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

在本机中，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组件，并显示当前的Text。 这是我将如何设置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>
        )
    }
}

现在，选项卡的状态和呈现都由选项卡本身处理，页面便可以干净地使用选项卡来实现目标。