Question

我有这个模型，有一个愿景渲染。

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

我不知道如何实现这一点，我尝试了类似的例子但是我浪费了我的时间，因为旧的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',
    }
);

Answer 1

创建一个组件数组，然后返回一个方法，在渲染时调用它，只需在需要一个新按钮时将新组件添加到数组中。数组需要处于状态，因此它再次呈现

编辑：示例代码，我在记事本上写了这个，所以语法可能不对，但这就是想法

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',
    }
);

当单击文本并使用本机

1 个答案: