Question

我正在尝试创建一个可触摸的导航。因此，我有两种状态，组件的呈现方式为：selected和unchosen。在媒体上，他们更改状态并被选中。这在“文本视图”中可以正常使用，但在我自己的视图中，即使它处于可触摸视图中，也不再起作用。

它应该如何工作： http://www.giphy.com/gifs/Wmczw6pwf1ssUNIDkV

无法使用我的自定义视图（即使两者都被Touchable Opacity包装） http://www.giphy.com/gifs/XG718bNUbQq4Il1g69

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ScrollView, FlatList, TouchableWithoutFeedback, TouchableHighlight  , Alert} from 'react-native';
import {Header, TopNavigationButton, TopNavigationButtonUnchosen}  from './components';



type Props = {};
export default class App extends Component<Props> {


constructor(props) {
  super(props);
  this.state = { 
    topNavigationOptions : [
      {key: 'Quick Search'},
      {key: 'Person Search'},],
    chosenTopNavigation: 
      "Quick Search"
  };


}


renderItem = ({item}) => {
  if (item.key == this.state.chosenTopNavigation) {
    return (
      <TouchableWithoutFeedback onPress = { () => this.setState({chosenTopNavigation: item.key}) }  >
        <TopNavigationButton >
          {item.key}
        </TopNavigationButton>
      </TouchableWithoutFeedback>
      )
  } else {
    return (
      <TouchableWithoutFeedback onPress = { () => this.setState({chosenTopNavigation: item.key}) }>




        //if i use a standard Text component, it swiches state and rerenders just fine, but with my View it does not work.
        <TopNavigationButtonUnchosen>
          {item.key}
        </TopNavigationButtonUnchosen>
      </TouchableWithoutFeedback>
    )
  }
}


  render() {
    return (
      <View>

        <TouchableHighlight onPress= {this._onPressButton}>
          <Header>Kopf</Header>
        </TouchableHighlight>


        <ScrollView horizontal = {true}>
          <View style = {styles.navigationContainer}>
            <TopNavigationButton>Quick Search</TopNavigationButton>
            <Text style = {styles.unchosenTextStyle}>Person Search</Text>
          </View>
        </ScrollView>
      <View styles = {styles.navigationContainer}>  
        <FlatList 
          horizontal
          extraData = {this.state.chosenTopNavigation}
          data={this.state.topNavigationOptions}
          renderItem = {this.renderItem.bind(this)}
        />
      </View>
      </View>  
    );
  }
}

const styles = StyleSheet.create({


  navigationContainer: {
    marginLeft: 20,
    marginTop: 15,
    flexDirection: 'row',
    alignItems: 'center',
  },
  unchosenTextStyle: {
    fontSize: 17,
    ...Platform.select({
      ios: {
          fontFamily: "OpenSans-Bold"
      },
      android: {
          fontFamily: "opensansBold"
      }
    }),
    color: '#9AA5B1',
    marginLeft: 20
  }
});

自定义组件

import React from 'react';
import {View, Text, StyleSheet,Platform} from 'react-native';

const TopNavigationButtonUnchosen = (props) => {
    return (
        <View style = {styles.navigationBackgroundSelected}>
            <Text style = {styles.navigationBackgroundSelectedText}>{props.children}</Text> 
        </View>
    );
};

const styles = StyleSheet.create({
    navigationBackgroundSelected:{
        backgroundColor: 'transparent',
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'flex-start',
        borderRadius: 16,
        //opacity: 0.6, lasst auch das Child schlechter Aussehen
      },
      navigationBackgroundSelectedText:{
        paddingTop:5,
        paddingBottom:5,
        paddingLeft:15,
        paddingRight:15,
        fontSize:17,
        color:'#9AA5B1', 
        ...Platform.select({
          ios: {
              fontFamily: "OpenSans-Bold"
          },
          android: {
              fontFamily: "opensansBold"
          }
      }),  
    }
})


export {TopNavigationButtonUnchosen} ;

TopNavigationButtonUnchosen是一个普通的功能组件，只是有点样式。非常感谢您的帮助，真的无法向我自己解释这种奇怪的行为

注意：经过测试，我能够发现TouchableOpacity与custo组件一起使用时根本无法正常工作。我认为这与我的onpress函数有关。任何想法都很感激

可触摸组件中的此/上下文问题

0 个答案: