web-dev-qa-db-ja.com

タブナビゲーターで画面コンポーネントに小道具を渡す方法は？

これは私の最初の投稿ですので、正しい形式に従っていない場合はお詫びします。最初のアプリを作成していて、大きな問題が発生しました。 React Navigation v 5.xからのタブナビゲーターで構築されています。

私が達成したいのは：

  1. 画面の1つでデータのリストを変更します。
  2. それらの変更が別の画面で何が起こるかに影響を与えます。

私はこれを試しました https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props （プロップを渡すように設定できません）

そしてこれ React Native-1つの画面から別の画面に小道具を渡す（ナビゲートするタブナビゲーターを使用） （react-navigationの非推奨バージョン）

そしてこれ https://stackoverflow.com/a/56764509/12974771 （また、古いバージョンのreact-navigation）

とReduxですが、現在のバージョンのreactナビゲーションで使用できる例はありません。

私はこれで私のロープの終わりにいます、そしてこれを達成する方法についていくつかのステップバイステップが本当に必要です。これが私がやりたいことの大まかなスケッチです： https://i.stack.imgur.com/rbSCL.png

私がそれについて考えた方法は、コールバックを介して小道具として親状態を送信することですが、反応ナビゲーションの最新バージョンの画面コンポーネントを介して小道具を送信する方法を見つけることができません...

これは私のナビゲーション設定です：

const Tab = createBottomTabNavigator()

export default class MyApp extends Component{

    constructor(props) {
        super(props);

      }
    render(){
            return (

                   <NavigationContainer>
                        <Tab.Navigator 
                            screenOptions={({ route }) => ({
                            tabBarIcon: ({ focused, color, size }) => {
                                let iconName;

                                if (route.name === 'My tests') {
                                iconName = focused
                                    ? 'ios-list-box'
                                    : 'ios-list';
                                } else if (route.name === 'Testroom') {
                                iconName = focused ? 'ios-body' : 'ios-body';
                                }


                                return <Ionicons name={iconName} size={size} color={color} />;
                            },
                            })}
                            tabBarOptions={{
                            activeTintColor: 'tomato',
                            inactiveTintColor: 'gray',

                            }}
                        >
                            <Tab.Screen name="My tests"  component={MyTests}/> //This is where I want to send props
                            <Tab.Screen name="Testroom" component={TestRoom} />  //This is where I want to send props

                        </Tab.Navigator>
                    </NavigationContainer>

私はこれを読みました https://reactnavigation.org/docs/redux-integration が、私には意味がありません。これはコンポーネントのツリーにどのように適合しますか？どこに行くの？助けてください！

reactjsreact-nativereact-reduxparameter-passingreact-props
5
weedskurt

以下を使用できます

<Tab.Screen name="Favourite" component={() => <RecipeList CategoryId={0}></RecipeList>}/>

コンポーネントの再レンダリングが原因で、現在の状態の警告が失われる可能性があります。しかし、小道具は動作します。現在の状態の小道具をコピーする場合は、{... props}を使用できます

0
Dipankar Dutta

<MyTests />内の<Tab.Screen />コンポーネントに小道具を送信するには：

<Tab.Screen name="My tests">
  {() => <MyTests myPropsName={myPropsValue} />}
</Tab.Screen>
0
Alessandro Foolish Ciak DAnton