탭 탐색기를 사용하여 화면 구성 요소에 소품을 전달하는 방법

탭 탐색기를 사용하여 화면 구성 요소에 소품을 전달하는 방법

Stack Overflow에 대한 첫 게시물이므로 올바른 형식을 따르지 않았다면 죄송합니다.

나는 나의 첫 번째 앱을 만들고 있다.tab navigator from React Navigation v 5.x스크린에서 스크린으로 소품을 넘길 때 큰 문제에 부딪혔다.

달성하고 싶은 것은 다음과 같습니다.

1. 화면 중 하나에서 데이터 목록을 변경합니다.
2. 이러한 변경은 다른 화면에서 발생하는 작업에 영향을 줍니다.

나는 이것(소품 세팅에 실패), 이것(리액트 내비게이션의 폐지판) 및 이것(리액트 내비게이션의 구판)을 시험해 보았다.

리액트 내비게이션의 현재 버전에서는 사용할 수 있는 예가 없습니다.

나는 이것에 대해 내 인내심의 한계에 다다랐고 이것을 성취하는 방법에 대해 차근차근 해야 한다.다음은 제가 하고 싶은 일의 대략적인 개요입니다.

콜백을 통해 부모 상태를 소품으로 보내는 방법인데, 최신 리액트 내비게이션에서는 화면 컴포넌트를 통해 소품을 보내는 방법을 찾을 수 없습니다.

다음은 내 내비게이션 설정입니다.

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>
        )
    }
}

이거 읽었는데 말이 안 돼.이것은 컴포넌트 트리에 어떻게 들어가나요?어디로 가?도와주세요!

속성 'component' 대신 요소 유형 jsx를 전달하기 위해 속성 'children'을 사용할 수 있습니다.

이 방법으로 소품을 컴포넌트 예제에 전달할 수 있습니다.

    <tab.Screen
    name="home"
       children={()=><ComponentName propName={propValue}/>}
    />

속성 자녀에게 jsx 요소를 반환하는 함수가 필요하기 때문에 '()=>'을 사용하는 것이 중요합니다.

정답은 코드 댓글에서 확인하세요.

<Tab.Screen
  name="AdminTab"
  children={() => <AdminPage userData={this.props.userSettings} />}
  // component={() => <AdminPage userData={this.props.userSettings} />} <<<---- Although this will work but passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour. You can safely remove the component attribute post adding children.
/>

화면 'AdminTab'의 '구성 요소' 프로포트에 대한 인라인 함수를 전달하고 있는 것 같습니다(예:component={() => <SomeComponent />}) 인라인 함수를 전달하면 렌더 재작성 시 컴포넌트 상태가 손실되고 렌더마다 재생성되므로 성능 문제가 발생합니다.원하는 동작을 위해 하위 기능을 '스크린'으로 대신 넘길 수 있습니다.

리액트 내비게이션 버전 5 이상

<Tab.Screen name="Work" component={Works} initialParams={{ age: 45 }} />

소품을 사용하여 액세스 할 수 있습니다.Works요소.

소품을 보내려면<MyTests />컴포넌트, 내부<Tab.Screen />:

<Tab.Screen name="My tests">
  {() => <MyTests myPropsName={myPropsValue} />}
</Tab.Screen>

<Tab.Navigator>
   <Tab.Screen name="Lead">
   {() => <LeadList {...this.props} />}
   </Tab.Screen>

   <Tab.Screen name="Opportunity">
   {() => <OpportunityList {...this.props} />}
   </Tab.Screen>
</Tab.Navigator>

또한 모든 화면에 팝업을 표시하기 위해 스크린에 기능을 전달해야 하는데 특정 화면에 팝업을 표시해야 합니다.여기 내 해결책이 있다.이제 리렌더(퍼포먼스) 문제는 잊으십시오.

       <Tab.Screen
        initialParams={{
            onRemovePress: () => {
              props.setShowPopup(true)
            }
          }}
        name="Followers"
        component={Followers}
        options={{
          tabBarLabel: ({ focused, color }) => {
            return (
              <Text style={{ color: focused ? light.tintColor : light.black, marginBottom: 10 }}>{`${props.numOfFollowers} Followers`}</Text>
            )
          }
        }}
      />

다음을 사용할 수 있습니다.

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

컴포넌트 재렌더로 인해 현재 상태의 경고 손실을 게이트할 수 있지만 소품은 작동합니다.현재 상태 소품을 복사하려면 {...props}개를 사용할 수 있습니다.

<Tab.Screen
   name='tabName'
   children={()=>{
    return(
      <CustomComponent prop={yourProp} />
    )
   }}
  />

오늘 처음 조사했는데, @react-navigation/bottom-tabs, v^5.11.10에 대해 작은 업데이트를 하고 싶어서 매우 도움이 되었습니다.또한 Tab.screen의 컴포넌트 프로포넌트 내에서 더 이상 전달되지 않도록 하고 자녀에게 익명의 함수가 요소/컴포넌트를 반환하도록 해야 합니다.

ScreenMap을 사용하여 화면을 렌더링하는 경우 다음과 같이 수행할 수 있습니다.

_renderScene = SceneMap({
    first: () => <MyEvents {...this.props} date={this.state.date} />,
    second: () => <F4FEvents {...this.props} date={this.state.date} />,
});

언급URL : https://stackoverflow.com/questions/60439210/how-to-pass-props-to-screen-component-with-a-tab-navigator