使用 @react-navigation/stack 中的 createStackNavigator，无法呈现堆栈屏幕

Question

我正在使用来自@react-navigation/stack 的 createStackNavigator，我正在尝试使用 Formik 作为我的 stackScreen 之一呈现表单页面，但它不会显示该页面。我没有收到任何错误，而且我相信我的样式设置正确，所以我不确定如何继续。主页有效，所以我知道该方法有效。

StackNavigator.js

import * as React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import LinkScreen from "../screens/LinksScreen"
import HomeScreen from "../screens/HomeScreen"
import User from "../screens/User"
import Form from "../screens/Form"
import Info from "../screens/Info"

const Stack = createStackNavigator();

const HomeStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name ="Home" component={HomeScreen} />
    </Stack.Navigator>
  )
}

// Settings page
const SettingStackNavigator = () => {
    return (
      <Stack.Navigator initialRouteName={'Settings'} >
        <Stack.Screen name="Settings" component={LinkScreen} />
        <Stack.Screen name="Profile" component={User} />
      </Stack.Navigator>
    );
  }

// Form Page
  const FormStackNavigator = () => {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Form" component={Form} />
      </Stack.Navigator>
    );
  }

  // Other page?
  const InfoStackNavigator = () => {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Info" component={Info} />
      </Stack.Navigator>
    );
  }

export { HomeStackNavigator, SettingStackNavigator, FormStackNavigator, InfoStackNavigator };

Form.js

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Button, Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ScrollView, TextInput } from 'react-native-gesture-handler';
import styles from'./screenStyles'
import {Formik} from 'formik'

export default function Form(){
    return(
        <View style={styles.container}>
            <Formik
                initialValues={{Test1: '', Test2: '', Test3:''}}
                onSubmit={(values)=>{
                    console.log(values);
                }}
            >
                {(props)=>{
                    <View style={styles.container}>
                        <TextInput
                            style={styles.input}
                            placeholder='Test1 Text'
                            onChangeText={props.handleChange('Test1')}
                            value={props.values.Test1}
                        />
                        <TextInput
                            style={styles.input}
                            placeholder='Test2 Text'
                            onChangeText={props.handleChange('Test2')}
                            value={props.values.Test2}
                        />
                        <TextInput
                            style={styles.input}
                            placeholder='Test3 Input'
                            onChangeText={props.handleChange('Test3')}
                            value={props.values.Test3}
                        />

                        <Button title='Submit' color='blue' onPress={props.handleSubmit}/>

                    </View>
                }}
            </Formik>
        </View>
    );
}

表单页面只有表单header但没有内容

Answer 1

在查看您提供的零食时，您 were passing formik properties 以正确的方式但没有返回该表格，因此返回该表格有效。

这是工作代码。

export default function Form(){
    return(
        <View style={styles.container}>
            <Formik
                initialValues={{Test1: '', Test2: '', Test3:''}}
                onSubmit={(values)=>{
                    console.log(values);
                }}
            >
                 {formikProps => ( // here you need to return your form
                    <View style={styles.container}>
                        <TextInput
                            style={styles.input}
                            placeholder='Test1 Text'
                            onChangeText={formikProps.handleChange('Test1')}
                            value={formikProps.values.Test1}
                        />
                        <TextInput
                            style={styles.input}
                            placeholder='Test2 Text'
                            onChangeText={formikProps.handleChange('Test2')}
                            value={formikProps.values.Test2}
                        />
                        <TextInput
                            style={styles.input}
                            placeholder='Test3 Input'
                            onChangeText={formikProps.handleChange('Test3')}
                            value={formikProps.values.Test3}
                        />

                        <Button title='Submit' color='blue' onPress={formikProps.handleSubmit}/>

                    </View>
                 )}
            </Formik>
        </View>
    );
}

Here is a link to working snack

使用 @react-navigation/stack 中的 createStackNavigator，无法呈现堆栈屏幕

Using createStackNavigator from @react-navigation/stack, unable to render a stackscreen

javascript

reactjs

react-native

formik