如何在所有屏幕上呈现相同的组件？答案

【问题标题】：How to render the same component on all screens?如何在所有屏幕上呈现相同的组件？
【发布时间】：2018-04-17 12:36:17
【问题描述】：

我有一个StackNavigator，我为每个屏幕指定了相同的 headerRight Icon：

export default StackNavigator(
    {
        Authorization: {
            screen: AuthorizationScreen
        },
        SignIn: {
            screen: SignInScreen
        },
        SignUp: {
            screen: SignUpScreen
        },
        Main: {
            screen: MainScreen
        },
        Language: {
            screen: LanguageScreen
        },
        //...etc
    },
    {
        navigationOptions: {
            headerRight: (
                <Icon color={'#77767c'}
                      name='ios-contact-outline'
                      size={30}
                      style={{ paddingRight: 30}}
                      type='ionicon'
                />
            ),
        }
    }
)

所有屏幕都是从单独的文件中导入的。当按下此Icon 时，无论我在哪个屏幕上，我都希望呈现相同的组件。问题是，除了在我拥有的每个屏幕上编写某种状态处理和onPress 函数之外，我想不出一种方法来执行此操作，编写和维护起来真的很乏味。有没有办法解决这个问题，只写一次组件渲染？

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案1】：

您可以为 Header 创建一个组件，并将其传递到所有屏幕的 navigationOptions 中。然后你只需要处理每个屏幕上的方法，你可以在这里做你的事情。

自定义标题类：

class Header extends Component {
    render() {
        const props = this.props;
        return (<View>
            <View
                style={KEEP_YOUR_STYLE}
            />
            <View style={styles.containerStyle} >
                <Text
                    style={your_style}
                    numberOfLines={1}
                >TITLE</Text>

                <TouchableOpacity
                    style={styles.touchableOpacityStyle}
                    onPress={props.onPress}
                >
                    <Image
                        source={YOUR_ICON}
                        style={{
        position:'absolute',
        right: 10,
        width: 20,
        height: 20,
        resizeMode: 'cover',
    }
}            />}
                </TouchableOpacity>                
            </View>
        </View>
        );
    }
}
export { Header };

在您的 StackNavigator 中：

const defaultNavigation = ({ navigation }) => ({
    header: (<Header
        title='Hellow'
    />),
});

Language: {
    screen: LanguageScreen,
    navigationOptions: defaultNavigation,
},

在您的特定屏幕中：

 static navigationOptions = ({ navigation }) => ({
        header: (
            <Header
                title='Your Title'
                onPress={() => { 
                    // DO YOUR STUFF
                }}
            />),
    });

【讨论】：