React Native - 如何在图标按下时重新渲染 Navigator 组件答案

【问题标题】：React Native - How to re-render Navigator component on icon pressReact Native - 如何在图标按下时重新渲染 Navigator 组件
【发布时间】：2016-06-01 05:36:30
【问题描述】：

当导航器组件图标被按下时，我将如何重新渲染/更改它的颜色。我有 TouchableHighlight ，但我需要状态永久保留。例如，有人按下“最喜欢的”心形图标，它会从灰色变为红色。一段时间以来，我一直在努力寻找解决方案。

这是我的代码中应该进行更改的部分。我需要我的 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 }
        />
    }
/>

【问题讨论】：

您能否展示目前为止的一些代码或者您想要完成的截图？谢谢。
我已经用相关代码更新了我的问题。

标签： react-native

【解决方案1】：

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

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

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

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

然后在onpress定义的Function中改变颜色：

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

希望这些对你也有用，对你有帮助。

【讨论】：