Phản ứng chuyển hướng Navigation màu nền và kiểu dáng StackNavigator

Question

Tôi khá mới đối với React Native, nhưng tôi có một ứng dụng làm việc đơn giản với ba cảnh. Trước đây tôi đã sử dụng Navigator nhưng nó cảm thấy tụt hậu và rất vui khi thử React Navigation (như trong https://reactnavigation.org/). Sau khi thực hiện Điều hướng phản ứng, màu nền của tôi chuyển từ màu trắng sang màu xám và màu xám thành màu trắng. Đây là một điều kỳ lạ và không nên liên quan. Tuy nhiên tôi không thay đổi phong cách của mình. Tôi chỉ thực hiện điều hướng mới và màu sắc đã thay đổi. Khi tôi trở lại Navigator, màu sắc của tôi trở lại. Tôi đang sử dụng StackNavigator. Có ai khác đã gặp hiện tượng kỳ lạ này không?

Hoặc có thể một câu hỏi hay hơn là: làm cách nào để tạo kiểu cho tiêu đề và màu nền trong StackNavigator của React Navigation?

Answer 1

Để tạo kiểu cho tiêu đề trong Phản ứng Navigation sử dụng một đối tượng tiêu đề bên trong navigationOptions đối tượng:

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 */ 
    } 
    } 
} 

Đối với styling backgroundColor, bạn chỉ cần thiết lập các backgroundColor trong ứng dụng của bạn nếu không bạn sẽ có được màu sắc mặc định .

CẬP NHẬT !! Tính đến tháng 5 năm 2017 beta9 các navigationOptions đang phẳng

Bạn có thể đọc về sự thay đổi phá vỡ ở đây: https://github.com/react-community/react-navigation/releases/tag/v1.0.0-beta.9

Bạn cần phải loại bỏ các phím đối tượng từ các đối tượng tiêu đề. Ngoài ra, lưu ý rằng chúng đã được đổi tên.

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

Answer 2

Dưới đây là ví dụ về những gì tôi đang sử dụng để thay đổi màu nền thẻ và nền Tiêu đề và màu phông chữ.

/* 
 
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 ( 
 
    \t <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

Sử dụng mã dưới đây để tạo tiêu đề menu tùy chỉnh

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