Передача данных между экранами React Native (с экрана A на экран B на экран C) - PullRequest
Новая
       103

Передача данных между экранами React Native (с экрана A на экран B на экран C)

3 голосов
/ 02 мая 2020

Рассмотрим следующий сценарий. По сути, у нас есть MaterialTopTabNavigator, вложенное в StackNavigator.

. Как передать все данные из функции до MaterialTopTabNavigator. Обратите внимание, что MaterialTopTabNavigator должен сначала от go до StackNavigator

file1. js

const[test,setTest] = useState('testing');
function moveToResults(){
    navigation.navigate('Results', test)
}

Здесь у нас есть простая функция, которая делает Приложение переходит на другой экран, и оно переходит в состояние test. Когда вызывается moveToResults(), это приводит нас к:

file2. js // Обратите внимание, что PostFun является главной страницей StackNavigator. 

const Tab = createMaterialTopTabNavigator();

function PostFun({navigation}) {
  return (

         <Tab.Navigator 
            initialRouteName="Feed"
            activeColor="#e91e63"
            tabBarOptions={{
                labelStyle: {fontSize:12, color:"#faa19b"},
                tabStyle: {height:65, justifyContent: "flex-end"},
            }}
            style={styles.header}>
                <Tab.Screen name="Activity" component={FindFunActivity} />
                <Tab.Screen name="Event" component={FindFunEvent} />
        </Tab.Navigator>

  );
}

File2. js является началом `MaterialTopTabNavigator, так как вы можете видеть, что эта навигация имеет две верхние вкладки (Активность и Событие).

Одна из вкладок может выглядеть примерно так, и именно здесь мне нужно отображаемая переменная:

file3. js

const FindFunEvent = (navigation) =>{
return(
<View>
    <Text>{navigation.getParam()}</Text>
</View>
)

}

Вопрос

Как мне заставить мою переменную test отображать в компоненте FindFunEvent?

Это гораздо сложнее объяснить, чем что-либо, здесь визуальный, если вы предпочитаете.

Вот ссылка на короткое видео, посвященное проблеме

Ответы [ 3 ]

2 голосов
/ 05 мая 2020

Вы можете получить эту работу, передав значение в качестве реквизита компонента:

file1. js

const[test, setTest] = useState('testing');

function moveToResults(){
    navigation.navigate('Results', { test: test })
}

file2. js 

const Tab = createMaterialTopTabNavigator();

function PostFun({ route, navigation }) {
  const { test } = route.params;

  return (
        <Tab.Navigator 
            initialRouteName="Feed"
            activeColor="#e91e63"
            tabBarOptions={{
                labelStyle: {fontSize:12, color:"#faa19b"},
                tabStyle: {height:65, justifyContent: "flex-end"},
            }}
            style={styles.header}
        >
          <Tab.Screen name="Activity">
              { (props) => <FindFunActivity {...props} myProp='test'  /> }
          </Tab.Screen>

          <Tab.Screen name="Event" component={() => <FindFunEvent test={test} />} />
        </Tab.Navigator>

  );
}

file3. js

const FindFunEvent = ({ test }) => {
  return(
    <View>
      <Text>{ test }</Text>
    </View>
  )
}

Подобный пример можно посмотреть здесь: https://snack.expo.io/UDHVnSUwK

0 голосов
/ 03 мая 2020

Один простой способ сделать это - использовать global.data. Когда вы используете глобальную переменную, вы можете использовать ее в любом месте приложения. Это не идеальный вариант, поскольку в программировании не рекомендуется использовать глобально. Я не совсем уверен, возможно ли то, что вы пытаетесь сделать, если нет, вы можете прибегнуть к использованию global.

0 голосов
/ 03 мая 2020

Допустим, вы хотите перемещаться и передать значение, полученное на экране A, на экран B и на экран C. Вы можете сделать что-то вроде этого

Экран A 

this.props.navigation.navigate('ScreenB',
   {value: 'hi', });
}

Экран B 

this.props.navigation.navigate('ScreenC',
    this.props.route.params.value);
}

Экран C

 this.props.route.params.value
...