@kirillleogky

Как добавить объект со стилями Link (React Router)?

App.js
import React from "react";
import { StyleSheet, Text, View, Platform, ScrollView, TouchableOpacity, Alert } from "react-native";
import { Router, Route, Link } from "./react-router";

const About = () => <Text>About</Text>;

const History = () => <Text>History</Text>;

const App = () => (
  <Router>
    <ScrollView contentContainerStyle={styles.container}>
      <Route exact path="/" component={About} />
      <Route path="/history" component={History} />
      <View style={styles.nav}>
        <Link to="/" style={styles.aboutBtn}>
          <TouchableOpacity
            onPress={() => Alert.alert('Button pressed')}
          >
            <Text style={styles.aboutBtnText}>About</Text>
          </TouchableOpacity>
        </Link>
        <Link to="/history" styles={styles.historyBtn}>
          <TouchableOpacity
            onPress={() => Alert.alert('Button pressed')}
          >
            <Text style={styles.aboutBtnHistory}>History</Text>
          </TouchableOpacity>
        </Link>
      </View>
    </ScrollView>
  </Router>
);

const styles = StyleSheet.create({
  container: {
    padding: 10,
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
  },
  nav: {
    position: 'fixed',
    bottom: '2.4%',
    width: '91.3%',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    boxShadow: '0px 0px 2px rgba(77, 82, 85, 0.1), 0px 12px 20px rgba(77, 82, 85, 0.2), inset 0px 0px 2px rgba(240, 244, 247, 1)',
    borderRadius: 20,
    height: 64,
  },
  aboutBtn: {
    width: '50%',
    height: '100%',
  },
  historyBtn: {
    width: '50%',
    height: '100%',
  },
});

export default App;






При добавлении стилей к объекту:
<Link to="/" style={styles.aboutBtn}>
Появляется ошибка:

Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.



Такой вариант работает:
<Link to="/" style={{width: '50%, height: '100%'}}>
  • Вопрос задан
  • 46 просмотров
Пригласить эксперта
Ответы на вопрос 2
@smartbe
Попробуйте добавить такой код

const style = styles();

и уже это применить к link
Ответ написан
kirbi1996
@kirbi1996
Кинь стили выше, либо вообще создай функцию в парке style в которой делаешь return {твои стили},
И в блоках пишешь style={названиефункции.названиеобьектасостилем}
И кстати почему react router dom, а не react navigation?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы