Question

按下按钮时，如何重新渲染/更改导航器组件图标的颜色。我有TouchableHighlight，但我需要永久保持状态。例如，有人按下了最喜欢的＆＃39;心脏图标，它从灰色变为红色。我现在一直试图找出解决方案。

这是我的代码中应该发生更改的部分。我需要使用if语句和Navigator图标根据在TouchableHighlight onPress触发时更改的true / false值重新渲染。

＆＃13;

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 }
        />
    }
/>

＆＃13;

Answer 1

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

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

您可以在Navigaton栏的RooteMapper中定义Icon：

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

然后在onpress定义的函数中更改collor：

 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");
  }
}

希望这些也适合你，它会帮助你。

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

1 个答案: