Реагируйте на собственный экран переключателя с помощью TabBar - PullRequest
Новая
       23

Реагируйте на собственный экран переключателя с помощью TabBar

0 голосов
/ 03 апреля 2020

Привет, я новичок, чтобы реагировать на нативную.

Я хочу сделать приложение с этим репо: liquidbottomnavigation как TabBar.

Я реализовал это, но как переключить экран при нажатии на вкладку? Мой app.js выглядит так: 

const App: () => ReactNode = () => {
  return (
    <>
      <StatusBar />
      <SafeAreaView style={{flex: 0, backgroundColor: 'lightgrey'}} />
      <SafeAreaView style={styles.container}>
        <View style={{flex: 1, backgroundColor: 'lightgrey'}}>

          <TabBar
            onPress={index => {
                alert(index)
            }}
            values={[
              {
                title: '',
                image: require('./assets/home.png'),
                tintColor: 'black',
              },
              {
                title: '',
                image: require('./assets/requests.png'),
                tintColor: 'black',
              },
              {
                title: '',
                image: require('./assets/events.png'),
                default: true,
                tintColor: 'black',
              },
              {
                title: '',
                image: require('./assets/members.png'),
                tintColor: 'black',
              },
              {
                title: '',
                image: require('./assets/account.png'),
                tintColor: 'black',
              },
            ]}
          />
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: 'white',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 50,
  },
});

export default App;

Мои экраны выглядят так: 

import React from 'react';
import {View, StyleSheet, Text} from 'react-native';

import {Ionicons} from '@expo/vector-icons';

const TabIcon = props => (
  <Ionicons
    name={'md-home'}
    size={35}
    color={props.focused ? 'grey' : 'darkgrey'}
  />
);

export default class ScreenOne extends React.Component {
  static navigationOptions = {
    tabBarIcon: TabIcon,
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen One</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Можете ли вы помочь мне? Я не могу найти решение, которое подходит. Или я за это глупо ... Не могли бы вы объяснить?

...