React native 使用react native单击文本时追加元素

我有这个模型，有一个视觉效果

我想在单击文本“AddLanguage”时附加一对选择器。我想添加的是两种语言之间的另一行翻译

我不知道如何实现这一点，我尝试了类似的例子，但我只是浪费了我的时间，因为旧的React代码是无用的

我的成就是如此之大

但添加语言是行不通的

class DetailsScreen extends React.Component {


        getLanguageName = function(key) {
            key = key.slice(0,2);
            lang = this.state.isoLangs[key];
            return lang ? lang.name : undefined;
        };
        getLanguageNativeName = function(key) {
            key = key.slice(0,2);
            lang = this.state.isoLangs[key];
            return lang ? lang.nativeName : undefined;
        };



    render() {


        keys = Array.from( this.state.isoLangs );

        return (
            <View style={{flex: 1, justifyContent: 'center'}}>
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>

                    <Text style={{
                        fontSize: 20,
                        fontFamily: 'normal',
                        color: 'skyblue',
                    }}>
                        Which languages do you translate?
                    </Text>
                </View>
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>




                    <Picker style={{width: 150}}
                        selectedValue={this.state.language}
                        onValueChange={(itemValue) => this.setState({language: itemValue})}>
                        {
                            Object.keys(this.state.isoLangs).map((lang) => {
                                console.log('lang: ', lang);
                                console.log('lang name: ', this.state.isoLangs[lang].name);
                                console.log('lang nativeName: ', this.state.isoLangs[lang].nativeName);
                                return  <Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang} />
                            })
                        }
                    </Picker>
                    <Image
                        source={require('./assets/Arrow.png')}
                    />

                    <Picker style={{width: 150}}
                            selectedValue={this.state.language}
                            onValueChange={(itemValue) => this.setState({language: itemValue})}>
                        {
                            Object.keys(this.state.isoLangs).map((lang) => {
                                console.log('lang: ', lang);
                                console.log('lang name: ', this.state.isoLangs[lang].name);
                                console.log('lang nativeName: ', this.state.isoLangs[lang].nativeName);
                                return  <Picker.Item key={lang} label={this.state.isoLangs[lang].name} value={lang} />
                            })
                        }
                    </Picker>
                </View>
                <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
                    <Text style={{
                        fontSize: 20,
                        fontFamily: 'normal',
                        color: 'skyblue',
                    }}>+ add language</Text>
                </TouchableHighlight>

                <View style={{flexDirection: 'row', justifyContent: 'center'}}>

                    <TouchableHighlight onPress={() => this.props.navigation.navigate('Screen3')}>
                        <Image
                            source={require('./assets/Next.png')}

                        />
                    </TouchableHighlight>
                </View>
            </View>
        );
    }
}

const RootStack = StackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Details: {
            screen: DetailsScreen,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

class DetailsScreen扩展了React.Component{
getLanguageName=函数（键）{
key=key.slice（0,2）；
lang=this.state.isoLangs[key]；
返回lang？lang.name：未定义；
};
getLanguageNativeName=函数（键）{
key=key.slice（0,2）；
lang=this.state.isoLangs[key]；
return lang？lang.nativeName：未定义；
};
render（）{
keys=Array.from（this.state.isoLangs）；
返回(
你翻译哪种语言？
this.setState（{language:itemValue}）}>
{
Object.keys（this.state.isoLangs）.map（（lang）=>{
log（'lang:'，lang）；
console.log（'lang name:'，this.state.isoLangs[lang].name）；
console.log（'lang nativeName:'，this.state.isoLangs[lang].nativeName）；
回来
})
}
this.setState（{language:itemValue}）}>
{
Object.keys（this.state.isoLangs）.map（（lang）=>{
log（'lang:'，lang）；
console.log（'lang name:'，this.state.isoLangs[lang].name）；
console.log（'lang nativeName:'，this.state.isoLangs[lang].nativeName）；
回来
})
}
this.props.navigation.navigate（'Details'）}>
+添加语言
this.props.navigation.navigate（'Screen3'）}>
);
}
}
const RootStack=StackNavigator(
{
主页：{
屏幕：主屏幕，
},
详情：{
屏幕：详细信息屏幕，
},
},
{
initialRouteName:“主页”，
}
);

创建一个组件数组和一个返回的方法，在渲染时调用该方法，并在需要新按钮时向数组中添加一个新组件。数组需要处于状态，以便再次渲染

编辑： 示例代码，我在记事本上写的，所以语法可能错误，但这就是我的想法

class DetailsScreen extends React.Component {


    state = {pickers : [<YourPickerComponent/>]}

    getLanguageName = function(key) {
        key = key.slice(0,2);
        lang = this.state.isoLangs[key];
        return lang ? lang.name : undefined;
    };
    getLanguageNativeName = function(key) {
        key = key.slice(0,2);
        lang = this.state.isoLangs[key];
        return lang ? lang.nativeName : undefined;
    };
    _addLanguage(){
      pickers = this.state.pickers 
      pickers.push(<YourPickerComponent/>)
      this.setState({
        ...this.state,
        pickers=pickers
      })
    }

render() {


    keys = Array.from( this.state.isoLangs );

    return (
        <View style={{flex: 1, justifyContent: 'center'}}>
            <View style={{flexDirection: 'row', justifyContent: 'center'}}>

                <Text style={{
                    fontSize: 20,
                    fontFamily: 'normal',
                    color: 'skyblue',
                }}>
                    Which languages do you translate?
                </Text>
            </View>
            <View style={{flexDirection: 'row', justifyContent: 'center'}}>
              {this.state.pickers.map(picker)=>{<View>picker</View>}}
            </View>
            <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
                <Text style={{
                    fontSize: 20,
                    fontFamily: 'normal',
                    color: 'skyblue',
                }}>+ add language</Text>
            </TouchableHighlight>

            <View style={{flexDirection: 'row', justifyContent: 'center'}}>

                <TouchableHighlight onPress={() => this.props.navigation.navigate('Screen3')}>
                    <Image
                        source={require('./assets/Next.png')}

                    />
                </TouchableHighlight>
            </View>
        </View>
    );
}
}


const RootStack = StackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Details: {
            screen: DetailsScreen,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

class DetailsScreen扩展了React.Component{
状态={pickers:[]}
getLanguageName=函数（键）{
key=key.slice（0,2）；
lang=this.state.isoLangs[key]；
返回lang？lang.name：未定义；
};
getLanguageNativeName=函数（键）{
key=key.slice（0,2）；
lang=this.state.isoLangs[key]；
return lang？lang.nativeName：未定义；
};
_addLanguage（）{
选择器=this.state.pickers
pickers.push（）
这是我的国家({
…这个州，
选择器=选择器
})
}
render（）{
keys=Array.from（this.state.isoLangs）；
返回(
你翻译哪种语言？
{this.state.pickers.map（picker）=>{picker}
this.props.navigation.navigate（'Details'）}>
+添加语言
this.props.navigation.navigate（'Screen3'）}>
);
}
}
const RootStack=StackNavigator(
{
主页：{
屏幕：主屏幕，
},
详情：{
屏幕：详细信息屏幕，
},
},
{
initialRouteName:“主页”，
}
);

创建一个组件数组，然后创建一个返回的方法，在渲染时调用它，并在需要新按钮时向数组中添加一个新组件。数组需要处于状态，才能呈现again@BrunoMazzardo我终于成功了，但我不知道该怎么做。我想问的是怎么做。请给我一分钟，然后首先您应该创建一个具有选择器道具的组件，然后创建一个向状态数组添加新选择器的方法，然后创建一个返回该数组项的方法，并在渲染时调用该方法