React-Native 和 Redux 原始文本不能在 <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);

reducer 很简单：

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 对象。