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

您可以为标题创建一个组件，并将其传递到所有屏幕的 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
                }}
            />),
    });

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

1 个答案: