React-Native 和 Redux Raw 文本不能在 <Text> 标签之外使用。不呈现字符串：''

Question

我正在开发一个具有多个屏幕并使用 react-native-router-flux 进行导航的 React-Native 应用程序。其中一个屏幕应该更改主屏幕的背景图像，因此在这个背景设置屏幕中，我有一个带有切换按钮的图像列表。目前看起来像这样：

如果我尝试点击任何其他开关，我会收到以下错误消息：

这里是主屏幕的代码：

class MainScreen extends Component {

changedBackground(){
    switch(this.props.backgroundImage){
        case 'straw':
            return (
                <Image source={require('../assets/img/paie.png')} style={mainScreenStyle.bgImg}/>
            );
        case 'rabbit fur':
            return (
                <Image source={require('../assets/img/rabbit_fur.jpg')} style={mainScreenStyle.bgImg}/>
            );
        case 'bear fur':
            return(
                <Image source={require('../assets/img/bear_fur.jpeg')} style={mainScreenStyle.bgImg}/>
            );
        case 'fox fur':
            return (
                <Image source={require('../assets/img/fox_fur.jpg')} style={mainScreenStyle.bgImg}/>
            );
        default:
            return ''
    }
}
    render() {
        return (
            <View style={mainScreenStyle.container}>
                <View style={mainScreenStyle.menu}>
                    {this.changedBackground()}
                </View>
                <TargetComponent style={mainScreenStyle.targetD}/>
                <ScoreBadges/>
            </View>
        );
    }
}

const mapStateToProps = state => {
    return {
        backgroundImage: state.mainScreen.backgroundImage,
    };
};

export default connect(mapStateToProps, {changeBackground})(MainScreen);

以及后台设置屏幕的代码：

const straw = () => {
    return <Image source={require('../../assets/img/paie.png')}
                  style={[background_list_img.background_img_icon]}/>;
};
const rabbit = () => {
    return <Image source={require('../../assets/img/rabbit_fur.jpg')}
                  style={[background_list_img.background_img_icon]}/>;
};
const bear = () => {
    return <Image source={require('../../assets/img/bear_fur.jpeg')}
               style={[background_list_img.background_img_icon]}/>;
};
const fox = () => {
    return <Image source={require('../../assets/img/fox_fur.jpg')}
               style={[background_list_img.background_img_icon]}/>;
};


const backgrounds_list = [
        {id:'0', name:'straw', img:straw()},
        {id:'1', name:'rabbit', img:rabbit()},
        {id:'2', name:'bear', img:bear()},
        {id:'3', name:'fox', img:fox()}
    ];

class BackgroundSettings extends Component {


    render(){
        return <FlatList data={backgrounds_list} keyExtractor={item=>item.id}
                         renderItem={({item})=>{return(
                             <ListItem leftIcon={item.img}
                                       title={"  " + item.name}
                                       hideChevron
                                       switchButton
                                       switched={this.props.currentBackground === item.name}
                                       onSwitch={()=>{this.props.changeBackground(item.name)}}/>);}}
        />;
    }
}

mapStateToProps = state => {
    return {
        currentBackground: state.mainScreen.backgroundImage,
    };
};

export default connect(mapStateToProps, {changeBackground})(BackgroundSettings);

减速器很简单：

const INITIAL_STATE = {backgroundImage:'straw'};

export default MainScreenReducer = (state = INITIAL_STATE, action) => {
    switch (action.type){
        case BACKGROUND_CHANGE:
            return { ...state, backgroundImage:action.payload};
        default:
            return state;
    }
}

动作创建器也很简单：

export const changeBackground = (imageName) =>{
    return{
        type:BACKGROUND_CHANGE,
        payload:imageName
    };

};

知道我错过了什么吗？我花了两天时间想弄明白...

Answer 1

将 switch 语句默认更改为任何组件

changedBackground(){
        switch(this.props.backgroundImage){
            case 'straw':
                return (
                    <Image source={require('../assets/img/paie.png')} style={mainScreenStyle.bgImg}/>
                );
            case 'rabbit fur':
                return (
                    <Image source={require('../assets/img/rabbit_fur.jpg')} style={mainScreenStyle.bgImg}/>
                );
            case 'bear fur':
                return(
                    <Image source={require('../assets/img/bear_fur.jpeg')} style={mainScreenStyle.bgImg}/>
                );
            case 'fox fur':
                return (
                    <Image source={require('../assets/img/fox_fur.jpg')} style={mainScreenStyle.bgImg}/>
                );
/**
  here change like this:
  return <View/>
   or
  return null
 */
            default:
                return ''
        }
    }

Answer 2

您应该尝试返回 null，而不是返回 ''。因为 '' 是一个字符串，需要 Text 包围它。但是 null 是一个对象，可以用来代替 DOM 个对象。

React-Native 和 Redux Raw 文本不能在 <Text> 标签之外使用。不呈现字符串：''

React-Native & Redux Raw text cannot be used outside of a <Text> tag. Not rendering string: ''

react-native

redux

react-native-router-flux