如何在所有屏幕上渲染相同的組件？

Question

我有一個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函數之外，我想不出一種方法來編寫此代碼，這對於編寫和維護確實非常繁瑣。 有什么辦法可以解決這個問題，只編寫一次組件渲染？

Answer 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
                }}
            />),
    });