React Navigation切换背景颜色和样式StackNavigator

Question

我对React Native很新,但我有一个简单的工作应用程序,有三个场景.我之前使用过Navigator,但感觉很迟钝,很高兴尝试使用React Navigation(如https://reactnavigation.org/).实施React Navigation后,我的背景颜色从白色变为灰色,灰色变为白色.这是一个奇怪的,不应该相关.但是我并没有改变我的风格.我只实现了新的导航并改变了颜色.当我恢复到导航器时,我的颜色会恢复.我正在使用StackNavigator.有没有其他人遇到这种奇怪的现象？

或者更好的问题是:如何在React Navigation的StackNavigator中设置标题和背景颜色？

Answer 1

要在React Navigation中设置标题样式,请在navigationOptions对象中使用标题对象:

static navigationOptions = {  
  header: {
    titleStyle: {
     /* this only styles the title/text (font, color etc.)  */
    },
    style: {
     /* this will style the header, but does NOT change the text */
    },
    tintColor: {
      /* this will color your back and forward arrows or left and right icons */
    }
  }
}

对于样式backgroundColor,您只需backgroundColor在应用程序中设置,否则您将获得默认颜色.

UPDATE!截至2017年5月beta9,navigationOptions现已持平

你可以在这里阅读有关重大变化的信息

您需要从标头对象中删除对象键.另外,请注意它们已被重命名.

static navigationOptions = {
   title: 'some string title',
   headerTitleStyle: {
      /*  */
   },
   headerStyle: {
      /*  */
   },
   headerTintColor: {
      /*  */
   },
}

Answer 2

这是我用来更改卡背景颜色和标题背景和字体颜色的示例.

/*
1. Change React Navigation background color.
- change the style backgroundColor property in the StackNavigator component
- also add a cardStyle object to the Visual options config specifying a background color
*/

//your new background color
let myNewBackgroundColor = 'teal';

const AppNavigator = StackNavigator({
  SomeLoginScreen: {
    screen: SomeLoginScreen
  }
}, {
      headerMode: 'screen', 
      cardStyle: {backgroundColor: myNewBackgroundColor
   }
});

//add the new color to the style property
class App extends React.Component {
  render() {
    return ( 
        <AppNavigator style = {{backgroundColor: myNewBackgroundColor}} ref={nav => {this.navigator = nav;}}/>
    );
  }
}

/*
2. Change React Navigation Header background color and text color.
- change the StackNavigator navigationOptions 
*/

/*
its not clear in the docs but the tintColor 
changes the color of the text title in the 
header while a new style object changes the 
background color.
*/


//your new text color
let myNewTextColor = 'forestgreen';

//your new header background color
let myNewHeaderBackgroundColor = 'pink';

const AppNavigator = StackNavigator({
  SomeLoginScreen: {
    screen: SomeLoginScreen,
    navigationOptions: {
      title: 'Register',
      header: {
        tintColor: myNewTextColor,
        style: {
          backgroundColor: myNewHeaderBackgroundColor
        }
      },
    }
  }
}, {
     headerMode: 'screen',
     cardStyle:{backgroundColor:'red'
   }
});

Answer 3

使用以下代码创建自定义导航标题

static navigationOptions = {
          title: 'Home',
          headerTintColor: '#ffffff',
          headerStyle: {
            backgroundColor: '#2F95D6',
            borderBottomColor: '#ffffff',
            borderBottomWidth: 3,
          },
          headerTitleStyle: {
            fontSize: 18,
          },
      };