React Native - 如何在图标上重新渲染导航器组件按

如何在按下按钮时重新呈现/更改导航器组件图标的颜色。我有TouchableHighlight它，但我需要状态永久保留。例如，某人按下了“最喜欢的”心脏图标，并从灰色变为红色。我一直在试图找出一段时间的解决方案。React Native - 如何在图标上重新渲染导航器组件按

这是我的代码中应该发生变化的部分。我需要我的if语句和导航器图标根据TouchableHighlight onPress触发时更改的真/假值重新呈现。

var NavigationBarRouteMapper = { 
 

 
    RightButton: function(route, navigator, index, navState) { 
 
     // * The button displayed in the top right of the navigator 
 

 
     switch(route.id) { 
 
      case('businessProfile'): 
 
       if (route.isFavourited) { 
 
        return (
 
         <View style={[ styles.multipleIcons ]}> 
 
          <TouchableOpacity 
 
           onPress={() => { 
 
            var favouriteBusiness = new FavouriteBusiness(); 
 
            favouriteBusiness.updateBusinessAsFavourite(route.business.id) 
 
           }} 
 
           style={[ styles.navBarButton, styles.iconRightPaddingLarge ]} 
 
           > 
 
           <IconFA 
 
            name='heart' 
 
            size={ 25 } 
 
            color='#de6262' 
 
            style={ styles.icon } 
 
           /> 
 
          </TouchableOpacity> 
 
         </View> 
 
        ); 
 

 
       } else { 
 

 
        return (
 
         <View style={[ styles.multipleIcons ]}> 
 
          <TouchableOpacity 
 
           onPress={() => { 
 
            var favouriteBusiness = new FavouriteBusiness(); 
 
            favouriteBusiness.updateBusinessAsFavourite(route.business.id) 
 
           }} 
 
           style={[ styles.navBarButton, styles.iconRightPaddingLarge ]} 
 
           > 
 
           <IconFA 
 
            name='heart' 
 
            size={ 25 } 
 
            color='#ddd' 
 
            style={ styles.icon } 
 
           /> 
 
          </TouchableOpacity> 
 
         </View> 
 
        ); 
 

 
       } 
 

 
      default: 
 
       return null; 
 
     } 
 
    }, 
 
}; 
 

 
<Navigator 
 
    ref='navigator' 
 
    sceneStyle={ [styles.container, styles.inner] } 
 
    initialRoute={{ 
 
     id: this.props.scene, 
 
     title:this.props.title 
 
    }} 
 
    renderScene={ this.renderScene } 
 
    configureScene={(route) => { 
 
     if (route.sceneConfig) { 
 
      return route.sceneConfig; 
 
     }  
 
     return Navigator.SceneConfigs.FloatFromRight; 
 
    }} 
 
    navigationBar={ 
 
     <Navigator.NavigationBar 
 
      routeMapper={ NavigationBarRouteMapper } 
 
      style={ styles.navigationBar } 
 
     /> 
 
    } 
 
/>

来源

2016-02-19 Jonathan Lockley

你可以显示一些代码到目前为止，也可以是你想要完成的屏幕截图吗？谢谢。 –

我已经用相关代码更新了我的问题。 –

，如果你仍然没有得到解决也许这些可以帮助。您可以在construktor定义一些属性：

constructor(props) { 
super(props); 
this.state = { 
    color: 'lightgrey', 
}; 
}

您可以在Navigaton栏RooteMapper定义图标：

return (<Icon 
       name="star" 
       style={[styles.rightHadderButton, {color: this.state.color}]} 
       onPress={RightNavigatorButton.favoriteStar.bind(this)}/>);

，然后更改科洛尔在onpress定义功能：

exports.favoriteStar = function(event) { 
    if (this.state.color === 'lightgrey') { 
    this.setState({ color: '#990000' }); 
    AlertIOS.alert("favoriteStar","Favorite"); 
    } else { 
    this.setState({ color: 'lightgrey' }); 
    AlertIOS.alert("favoriteStar","notFavorite"); 
    } 
}

希望这些作品也适合你，它可以帮助你。

来源

2017-03-08 09:09:47 NeETsu

React Native - 如何在图标上重新渲染导航器组件按

回答

相关问题