Реагировать на нативный дочерний компонент рендера - PullRequest
Новая
       80

Реагировать на нативный дочерний компонент рендера

0 голосов
/ 28 июня 2019

Я пытаюсь создать компонент заголовка, который изменяется в зависимости от того, какой экран вы просматриваете. Однако дочерний компонент не работает, если я пытаюсь создать несколько динамических кнопок.

Я разделил каждую часть заголовка на более мелкие компоненты, проблема в том, что правая сторона заголовка HeaderRightSide не выполняет рендеринг, если я сам не добавлю каждую кнопку. 

const screenIcon = {
    Home: 'home',
    Settings: 'tools'
}


export class AppHeader extends Component {
    static propTypes = {
        screenName: PropTypes.string.isRequired,
        navigation: PropTypes.object.isRequired,
        googleUser: PropTypes.object.isRequired,
        UserSignIn_logOut: PropTypes.func.isRequired
    }
    signOut = async () => {
        try {
            await GoogleSignin.revokeAccess();
            await GoogleSignin.signOut();
        } catch (error) {
            // console.error(error);
        } finally {
            this.props.UserSignIn_logOut({});
            this.props.navigation.navigate('SignIn');
        }
    }
    componentDidMount() {
        console.log(this.props.navigation.state)
    }
    render() {
        return (
            <Header>
                <HeaderLeftSide screenName={this.props.screenName} />
                <HeaderBody screenName={this.props.screenName} />
                <HeaderRightSide screenName={this.props.screenName} navigation={this.props.navigation} />
            </Header>
        )
    }
}

HeaderLeftSide = (props) => (
    <Left>
        <Button transparent>
            <Icon name={screenIcon[props.screenName]} />
        </Button>
    </Left>
)

HeaderBody = (props) => (
    <Body>
        <Title>{props.screenName}</Title>
    </Body>
)

HeaderRightSide = (props) => (
    <Right>
        {Object.keys(screenIcon).forEach(screen => 
           ( <Button transparent>
            <Icon name={screenIcon[screen]} />
        </Button>)
        )}
    </Right>
)


const mapStateToProps = (state) => ({
    googleUser: state.UserSignInReducer.googleUser
})

const mapDispatchToProps = {
    UserSignIn_logOut: () => {
        dispatch(UserSignIn_logOut());
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(AppHeader)

1 Ответ

0 голосов
/ 28 июня 2019

Мне просто нужно было поменять на каждую карту. Правильный код: 

HeaderRightSide = (props) => (
    <Right>
        {Object.keys(screenIcon).map(screen => (
            <Button transparent>
                <Icon name={screenIcon[screen]} />
            </Button>
        )
        )}
    </Right>
)
...